HTML DIV 不在父 div 之下

Question

我在使用 CSS 创建没有表格的 3 列时遇到问题。 3 <div>我创建的 s 不在父级下 <div> .出于某种原因，我必须使用内联样式。下面是代码:

    <div id="wrapper" style="border:thin solid red;width:520px;margin:auto;">

     <div id="header" style="border:thin solid blue;position:relative;margin:auto;">

        <div id="left_header" style="border:thin solid yellow;float:left;width:105px;position:relative;">
            left header
        </div><!-- closing div tag id=left_header -->

        <div id="center_header" style="border:thin solid grey;float:left;width:50%;">
            center header
        </div><!-- closing div tag id=center_header -->

        <div id="right_header" style="border:thin solid black;float:right;width:120px;">
            right header
        </div><!-- closing div tag id=right_header -->

    </div><!-- closing div tag id=header -->

</div><!-- closing div tag id=wrapper -->

<div> s left_header , center_header和 right_header不在 div header 内。我在这里缺少什么？

请帮助我，我已经尝试解决这个问题，但我在网络开发方面还很陌生。我试过对 left_header 使用相对定位和 center_header和 absolute对于 right_header .它仍然没有解决问题。

注意:代码已经在 Chrome、Firefox 和 IE8 上进行了测试。所有人都做同样的事情。

样本:

谢谢。

Answer 1

向左浮动会起作用，但真正解决问题的方法是使用 overflow:auto。这意味着您的 div 将调整大小以适应 float 内容，但不会影响其自身的位置 (fiddle)