Question

<div id="post">
    <img src="image.png"/>
    <div class="postbox">
        some content here
    </div>
</div>

如何使`.postbox'将宽度扩展到可能的最大值，相对于图像的宽度或没有图像？

#post{
width:569px;
overflow:hidden
}
#post img, #post .postbox{
float:left
}

我尝试width:100%到.postbox，但它占据了整个宽度。

http://jsfiddle.net/FTY4k/

Answer 1

.postbox { width:100% }

这将使div与容器的宽度相同

Answer 2

如果它没有弄乱您的布局，您可以浮动图像，但不能浮动div。

#post{
width:569px;
overflow:hidden;
}
#post img{
float:left;
}

Answer 3

使用CSS float将元素拉出流程。从某种意义上说，img和div class="postbox" a不再包含在div id="post"中，即使它仍然是DOM树中的父。

您可以尝试将这些内容设置为inline-block，而不是使用float，或者将它们与内部div一起浮动并使用clear，所有内容都包含在id="post"

更多细节在某种程度上取决于您在布局中想要做的事情的大局。

Answer 4

对于这些情况，我喜欢使用Nicole Sullivan的media对象抽象。这是fiddle（仅供参考）。

HTML：

<div class="media">
  <a href="#" class="img"><img src="http://placehold.it/100" alt="" /></a>
  <div class="bd">lorem dolor...</div>
</div>

CSS：

.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}

流体div宽度

4 个答案: