如何清除图像的底部，如清左/右

Question

有没有办法清除图像的底部？我尝试了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;
}

解决方案应如何显示的示例

Answer 1

根据您的图片，您可以使用以下 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元素应用一些填充来控制空白区域。