I 현재 향후 5 ~ 6로 성장할 수있는 제 4 열에 대한 다음과 같은 CSS 있습니다CSS를 사용하여 n 개의 열을 가운데에 배치하는 방법은 무엇입니까?
<style>
.columns {
margin: 0 auto;
border: 1px red dotted;
width: 90%;
}
.columns div {
float: left;
width: 20%;
overflow:hidden;
border: solid 1px;
margin-right: 1em;
}
</style>
<div class="columns">
<div>
<h3>First</h3>
<ul>
<li>left</li>
</ul>
</div>
<div>
<h3>Second</h3>
<ul>
<li>mid</li>
</ul>
</div>
<div>
<h3>Third</h3>
<ul>
<li>right</li>
</ul>
</div>
<div>
<h3>Fourth</h3>
<ul>
<li>far right</li>
</ul>
</div>
</div>
그것이 내가 페이지의 중간에 4 열을 중앙에 무엇을 사용할 수 있습니까? 당신은 아마뿐만 아니라 (.columns 후) 문서의 하단에 청산 사업부를 넣고 싶을 것이다
.columns {
width: 800px;
margin-left: auto;
margin-right: auto;
border: 1px red dotted;
}
:
지우기 div를 사용하지 마십시오. 대신 "최소 높이 : 10 픽셀"을 사용하십시오. f IE6 – Jason
div가 내부에 떠있는 경우에도 컨테이너 div의 테두리를 최소 높이로 늘립니까? –
4 번째 열의 오른쪽 여백과 div.columns의 오른쪽 테두리 사이의 간격이 여전히 존재합니다. 4 열이 div.columns를 고르게 채우게하려면 어떻게합니까? –