Question

我正在开发一个有趣的小项目，并试图让<div>内的图像漂浮在所述<div>的右侧时遇到一些麻烦。问题是它似乎忽略了容器（它所在的<div>）并且好像它是父包装器的一部分。我想要发生的是包含元素根据其内部的图像调整它的高度......我想。一直在玩弄它，但没有运气。

HTML ：

<div class="maincontentwrapper">
    <!--First body article on page-->
    <div class="contentpane">
    <img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
            Filler text. This is the only thing that<br />
            seems to change the height of this div's<br />
            border.
</div>

    <!--Second body article on page-->  
<div class="contentpane">
    Text goes here.
</div>
</div>

CSS 所有可见类的代码：

.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
          margin-bottom: 10px;
              padding: 4px 4px 4px 4px;
      text-indent: 1em;}
/* Thumbnail for first article on home page.
   Margins set to push image to align ignoring the container's
   border width and padding width. */
#infoimg {float: right;
      width: 145px;
      height: 150px;
      margin: -6px -6px 4px 4px;}
/* End Main Content Styles */

编辑：如果您需要指向网站的链接以澄清问题所在，我当然可以添加它。

Answer 1

我想要发生的是包含元素根据其内部图像调整高度

您需要清除图片下方，如下所示：http://jsbin.com/iduvof/1/edit

有几种方法可以执行此操作，您可以阅读有关here的更多信息。

我使用的方法是添加一个具有属性clear: both的额外div。这可能不是最佳实践，因为它是非语义标记，但它很容易！

图像浮动的麻烦

1 个答案: