2 
<div style="width:50%;"  class="outerdiv">
   <div style="">
            <div style="display:inline;">
                <span><?php echo __('Başlık :', 'goldmem');?></span>
            </div>
            <div style="display:inline; float:right;">
                    <input class="postptext" type="text" id="posttitle">
            </div>

        </div>
</div>

我有这个布局。Outerdiv 有边框，所以我可以看到它的大小变化。这是结果：

没有浮动：http: //i.imgur.com/F73U0jX.png ?1

带浮动：http: //i.imgur.com/8berzkN.png ?1

我怎样才能使 div 的大小包含所有元素。

4

2 回答 2

8

尝试添加- 因为这会overflow: hidden;为其后代.outerdiv创建一个新的块格式化上下文（它们从正常流程中取出，因为它们是浮动的，类似于绝对定位元素的方式，但不相同） - 它基本上允许容器确认浮动的存在，就好像它在正常流程中一样。关键是要记住，如果浮动没有被清除或者没有提供新的块格式化上下文，正常流程中的常规块级元素将忽略浮动。

于 2013-08-18T15:22:39.367 回答
0

您还可以在底部添加一个 div 来清除所有浮动项目。将此添加到您的 html 中：

<div style="display:inline; float:right;">
    <input class="postptext" type="text" id="posttitle">
</div>
<div class="clear"></div>

并将其添加到您的 CSS 中：

.clear {
    border: none;
    clear: both;
}

它将在JSFiddle中显示如下：

于 2013-08-18T15:38:10.633 回答