製作非浮動元素環繞浮動元素

Question

我目前有一個關於浮動項目的行爲和容器沒有環繞它們的問題。

我有一個包裝浮動元素的項目列表。這是一個非常簡化的版本：

<ul class="items"> 
    <li><img src="" />Text here</li> 
    <li><img src="" />More text</li> 
</ul> 

的CSS看起來是這樣的：

ul.items li 
{ 
    display: block; 
    border: 1px solid pink; 
} 

ul.items li img 
{ 
    float: left; 
} 

以前我在每個列表項的底部增加了一個「清除」項將它擴大到環繞圖片。這相當於Tony Aslett's CSS version。一個例子可以看到here。

不幸的是，我有一個菜單浮動在列表左邊，這意味着添加清除會在第一項下創建一個巨大的空間。這在上面的頁面中提到一個警告字（這很重要）。效果可見here。

我遵循我從Paul O'Brien找到的替代解決方案，使用overflow屬性。這像一個魅力。不幸的是，除了左邊的菜單之外，每個列表項目都有一個菜單浮在右上角。隨着overflow: auto，這些項目被推到外面。這可以看出here。標記是類似於這樣的：

<ul class="items"> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>Text here 
     </div> 
    </li> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>More text 
     </div> 
    </li> 
</ul> 

有沒有辦法讓'浮動'元素留在'項目'元素使用這種方法嗎？或者，我可能會缺少另一個解決方案嗎？

Answer 1

我不是100％確定整個使用案例在這裏，但是對於.floaty元素，使用position而不是float是合理的嗎？

基本上補充一點：

ul.items li { position: relative; } 
div.floaty { float: none; position: absolute; top: 0; right: 0; } 

Fiddle