Question

<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

使用float：http://i.imgur.com/8berzkN.png?1

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

Answer 1

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

Answer 2

您还可以在底部添加一个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：

中

float：right导致父div缩小

2 个答案: