div 3등분 해서 각각 정렬하기(좌,센,우) 문의 드립니다.
본문
안녕하세요. 오늘도 어김없이 밤을 세었네요~
잠은 8시쯤에 퇴근해서 2시쯤에 일어납니다^^;;
css 문의 드릴려구요..
.naviz {width:100%;}
.navigation {width:100%;width:-webkit-calc(100% /3);width:-moz-calc(100% /3);width:calc(100% /3);float:left;text-align:center;margin:1.3em 0em 1.3em 0em;line-height:1.5em;}
.navigation left {text-align:left;}
.navigation center {text-align:center;}
.navigation right {text-align:right;}
css 코드 입니다.
문제는 navigation left 랑, center랑 right가 따로 정렬이 되어야 하는데....
따로 정렬이 안되고 위쪽 navigation에 영향을 받습니다. 각각 조정이 안되서요;;
3등분한걸 똑같이 가운데 정렬하면 참 좋겠지만 그런 용도는 아니라서;;;;
능력자분들 도와 주세요~ 살려주세요~~~ 가 맞는 말이겠네요..
오늘도 행복한 하루 되세요 감사합니다..
답변 4
감사합니닷!!
저기 해당 html태그소스를 보고싶네요
css가 참 어렵네요ㅠㅠ 관심 감사합니다~!
float 속성에 대해 이해 하시면 어렵지 않습니다.
검색 많이해보세요
<div style="width:100%;align:center;>
<div style="width:90%;">
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:left;">1</div>
<div style="width:34%; padding:20px 0px 20px 0px;float:left; border:0;text-align:center;">2</div>
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:right;">3</div>
</div>
</div>
이렇게 해결 하였습니다^^; css 참 어렵네요!!
일단 우회적으로 해결 하였습니다~!!!!
<div style="width:100%;align:center;">
<div style="width:90%; overflow:hidden;">
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:left;">1</div>
<div style="width:34%; padding:20px 0px 20px 0px;float:left; border:0;text-align:center;">2</div>
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:right;">3</div>
</div>
</div>
<div style="border:1px solid #ccc; width:100px;">dd</div>
<style type="text/css">
#test:after {
content:"";
display:block;
clear:left;
}
</style>
<div style="width:100%;align:center;">
<div style="width:90%;" id="test">
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:left;">1</div>
<div style="width:34%; padding:20px 0px 20px 0px;float:left; border:0;text-align:center;">2</div>
<div style="width:33%; padding:20px 0px 20px 0px;float:left; border:0;text-align:right;">3</div>
</div>
</div>
<div style="border:1px solid #ccc; width:100px;">dd</div>
clear하는 부분이 없네요.
<div style="width:90%;"> 여기에 overflow:hidden을 추가하시거나
가상 선택자 하나 추가하셔서 clear 하시는 방법도 있습니다.
제일 마지막 </div> 밑에 <div style="background:#000; width:100px; height:100px;">test</div> 넣어 보시면 무슨 말인지 알 수 있습니다.
참고하시라고 남깁니다.