CSS wrap image或「center float」

我使用下面的代碼來顯示圖像列表並將陰影效果應用於每個圖像。圖像的方向可能會有所不同，但始終最大爲120px。CSS wrap image或「center float」

爲了讓這個工作，我不得不浮動：離開「陰影」容器。通過調整容器的邊距和圖像，我可以模擬陰影。（http://img200.imageshack.us/i/withfloat.png/）

這種方法的不足之處在於圖像左對齊。如果我刪除了浮點數，那麼.shadow背景橫跨li的整個寬度，並且不包裹圖像。（請參閱上面的url但「withoutfloat.png」）

如何獲取陰影div來包裝圖像並將其保持在li中？

定製CSS：

<style type="text/css"> 
    ul 
    { 
     list-style-type: none; 
     position: relative; 
     margin: 0; 
     padding: 0; 
    } 
    li.box 
    { 
     display: inline; 
     float: left; 
     margin: 3px; 
     background: red; 
     position: relative; 
    } 
    .wraptocenter 
    { 
     display: table-cell; 
     text-align: center; 
     vertical-align: middle; 
     width: 120px; 
     height: 120px; 
    } 
    .wraptocenter * 
    { 
     vertical-align: middle; 
    } 
    .shadow 
    { 
     background: blue; 
     margin: 10px 0 0 10px !important; 
     margin: 10px 0 0 5px; 

    } 
    .shadow img 
    { 
     margin: -4px 6px 6px -4px; 
    } 
</style>

HTML：

<ul> 
    <li class="box"> 
     <div class="wraptocenter"> 
      <span> 
       <div class="shadow"> 
        <img src="Handler.ashx?id=936&size=103" /> 
       </div> 
      </span> 
     </div> 
    </li> 
</ul>

來源

2009-12-14 Ben Foster

發表了一些代碼... – 2009-12-14 12:20:18

來自FAQ：「網頁設計和HTML/CSS佈局，你的職位是」設計師「，詢問Doctype。」 – halfdan 2009-12-14 12:26:14

@halfdan：這顯然是用於在瀏覽器旁邊有一個開放式Photoshop的人。然而，使用CSS定位可能與FORTRAN中的矩陣管理有相同的複雜性，所以請放鬆。 – Boldewyn 2009-12-14 12:59:27

卸下浮子但添加overflow:auto到包含元素。這將使得非浮動元素按照您期望的方式包含其內部浮動元素。

來源

2009-12-14 12:45:11

@Dave - 我刪除了我在div.shadow上添加的float，並添加了overflow：auto。但是，這似乎沒有任何影響。 div.shadow容器仍然無法包裝圖像。如果您指的是去除li元素上的浮點數，則需要水平渲染圖像列表。 – 2009-12-21 21:50:21

CSS wrap image或「center float」

回答

相關問題