图片浮动问题

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。这可能不是最佳实践，因为它是非语义标记，但它很容易！