推 shimuraken:受益匪淺~推一個！ 05/13 12:40
推 lyuping:受教了! 08/20 22:35
※ 引述《knives ()》之銘言：
: 我的html是這樣
: <div>
: <a class="prevPage browse left"></a>
: <div >
: <ul>
: <li>1</li>
: <li>2</li>
: </ul>
: </div>
: <a class="nextPage browse right"></a>
: </div>
: 我的css是這樣
: a.browse {
: background:url(image/hori_large.png) no-repeat;
: width:30px;
: height:30px;
: float:left;
: cursor:pointer;
: font-size:1px;
: }
: 我希望讓在nextPage 以後，就取消原本的float效果，才不會讓後面的貼上來
: 所以我又加了這一段
: .nextPage:after{
: clear:both;
: }
: 但是這樣子，後面的東西還是水平跟在 nextPage後面
: 請問要怎麼做才能讓後面的東西跳行
如果你想要讓 nextPage 之後的東西都clear
最簡單的方法就是改寫成
<div class="foo">
<a class="prevPage browse left"></a>
<div >
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<a class="nextPage browse right"></a>
</div>
.foo { clear: both; }
這樣 .foo 左右兩邊都不會有東西了
你之前學的應該是另外一套selfclear
但selfclear也不是這樣用
selfclear主要是讓目標元素包括所有子元素的空間
即使子元素全部為float
舉例
─┬───────┬┬───────┬- ←扁掉的div
│ float:left ││ float:right │
└───────┘└───────┘
如果那個扁掉的div做了selfclear
┌┬───────┬┬───────┬┐ ←包的好好的就是selfclear
││ float:left ││ float:right ││
└┴───────┴┴───────┴┘
詳細參考
http://www.positioniseverything.net/easyclearing.html
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.243.25.226