DIV位置 - div内有2个div

Question

我做错了什么 - 请帮我解决 我所要做的就是将div 2 div放入百分比宽度 你可以看到其中一个div从div中出来了

   <div style="border: 3px solid black; float: right; height: 27px; width:100px">

    <div style="position: relative;border: 3px solid black; float: right; height: 27px; width:50%">1</div>
     <div style="position: relative;border: 3px solid black; float: left; height: 27px; width:50%">1</div>


    </div>

Answer 1

由于边界，它们不合适。 50％+ 50％+ 12px边框超过100％。如果对外部div使用固定宽度100 px，则可以使用固定宽度44px而不是内部div的50％，它应该可以正常工作

Answer 2

继@ Christopher的answer之后，box model将每个方框设置为50％宽，然后将6px添加到边框的每个方框上。

CSS3引入box-sizing，可让您控制

以下是jsfiddle上的示例，其中显示了如何使用新的大小调整来执行您需要的操作。根据{{​​3}}，你在IE6或IE7中没有太多运气，并且必须为Firefox添加-moz前缀。

Answer 3

我认为问题是你的孩子DIVs边界属性。每个都有一个6px的边框。尝试删除边框并再次测试。 您也不需要为其位置值指定相对值。试试这段代码，然后告诉我结果。

 <div style="border: 3px solid black; float: right; height: 27px; width:100px">
    <div style="float: right; width:50%">Right div</div>
    <div style="float: left; width:50%">Left div</div>
</div>