1

有没有办法清除图像的底部？我试过margin-bottom: 100%, 和padding-bottom: 100%，但它不起作用，因为我下面有更多的 div 可以清除所有内容。

我只想清除包含 div 的图像的内容。

HTML

<div class="contentpart">
    <p>
      <a href="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1.jpg">
        <img class="alignnone size-medium wp-image-88" alt="contact-feat" src="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1-300x200.jpg" height="200" width="300">
      </a>
    </p>
    the text....
</div>
<div class="contentpart">
   The text.....
</div>

CSS

.contentpart img {
    float: left;
    clear: bottom;
}

解决方案的外观示例

解决方案的外观示例

4

1 回答 1

4

根据您的图像，您可以使用以下HTML实现布局：

<div class="contentpart">
      <a href="#">
          <img src="http://placehold.it/300x200">
      </a>
      Donec adipiscing, lorem non euismod venenatis...
</div>

并应用以下CSS规则：

.contentpart {
    border: 1px dotted gray;
    display: table;
}
.contentpart a {
    display: table-cell;
    vertical-align: top;
    padding-right: 20px;
}

您可以在以下位置查看演示：http: //jsfiddle.net/audetwebdesign/wknjA/

这是如何工作的

您可以使用 CSS 表格将文本保留在单个列中，而无需将其包装在块元素中。

应用于display: table父块和display: table-cell标签a。

a您可以通过对元素应用一些填充来控制空白。

于 2013-08-07T11:41:30.723 回答