div 3등분 해서 각각 정렬하기(좌,센,우) 문의 드립니다. 채택완료
안녕하세요. 오늘도 어김없이 밤을 세었네요~
잠은 8시쯤에 퇴근해서 2시쯤에 일어납니다^^;;
css 문의 드릴려구요..
</p><p>.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;}</p><p>
css 코드 입니다.
문제는 navigation left 랑, center랑 right가 따로 정렬이 되어야 하는데....
따로 정렬이 안되고 위쪽 navigation에 영향을 받습니다. 각각 조정이 안되서요;;
3등분한걸 똑같이 가운데 정렬하면 참 좋겠지만 그런 용도는 아니라서;;;;
능력자분들 도와 주세요~ 살려주세요~~~ 가 맞는 말이겠네요..
오늘도 행복한 하루 되세요 감사합니다..
답변 4개
float 속성에 대해 이해 하시면 어렵지 않습니다.
http://nine8007.tistory.com/entry/CSS-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%A2%8C-17-Float%EC%9D%98-%EC%9D%B4%ED%95%B4">http://nine8007.tistory.com/entry/CSS-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%A2%8C-17-Float%EC%9D%98-%EC%9D%B4%ED%95%B4
검색 많이해보세요
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
<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>
[/code]
[code]
<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>
[/code]
clear하는 부분이 없네요.
<div style="width:90%;"> 여기에 overflow:hidden을 추가하시거나
가상 선택자 하나 추가하셔서 clear 하시는 방법도 있습니다.
제일 마지막 </div> 밑에 <div style="background:#000; width:100px; height:100px;">test</div> 넣어 보시면 무슨 말인지 알 수 있습니다.
참고하시라고 남깁니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인