0

我正在做一个有趣的小项目，但在试图让 a<div>中的图像漂浮在 said 的右侧时遇到了一些麻烦<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 */

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

4

1 回答 1

0

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

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

有几种方法可以做到这一点，您可以在此处阅读更多信息。

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

于 2012-10-16T18:55:07.503 回答