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”

回答

相关问题