0

div のクラス名が最後になった後、セクションをクリアする必要があります。何らかの理由で、html を編集できませんでした。CSSだけを使用してそれを達成する必要があります。

私のHTMLコード：

<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>

CSS:

.column{ width:250px; margin-right:10px; float:left;}
.column.last{ margin-right:0px;}

何か助けはありますか？

4

2 に答える 2

1 
.column.last:after {
     visibility: hidden;
     display: block;
     font-size: 0px;
     content: " ";
     clear: both;
     height: 0px;
     line-height: 0px;
 }

これは「クリアフィックス」として知られています。

于 2013-07-20T10:33:39.700 に答える
-1

div を使用してフロートをクリアします。;)

.column{ width:24%; margin-right:1%;float:left;background:grey;margin-bottom:20px;}
.column.last{ margin-right:0px;}
.clear {clear:both;}


<div class="column">1<br />2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column last">5</div>

<div class="clear"></div>

<div class="column">6<br />7</div>
<div class="column">8</div>
<div class="column">9</div>
<div class="column last">10</div>

http://jsfiddle.net/vinicius5581/YMf2j/7

于 2013-07-20T10:58:07.440 に答える