关于Html中两个DIV并排显示的疑问:

漂流绅士 发布于 2017/06/28 17:06
阅读 214
收藏 0

关于Html中两个DIV并排显示的疑问:

有3个Div,其中一个是父Div,其余两个子Div。现在希望在父Div中两个子Div并排显示,宽度之和刚好是父Div宽度,但实际情况是两个子Div的宽度超过了父Div宽度,导致不能并排显示。

<html>

    <head>

        <title>div</title>

        <style type="text/css">

                body,html{width:50%;height:50%; }

                div.parent,div.child1,div.child2{

                           margin:0px;

                           padding:0px;

                           border:1px solid red;

                }

                div.child1{

                          float:left;

                          border:1px solid blue;

                          width:30%;

                          height:50%;

               }

               div.child2{

                       float:left;

                       border:1px solid blue;

                       width:70%;              

                      height:50%;

               }

        </style>

    </head>

    

    <body>

           <div class="parent">

                    <div class="child1">

                    </div>

                    <div class="child2">

                    </div>

             </div>

    </body>

</html>

加载中
0
PHPerKael
PHPerKael

并不是因为宽度的问题,而是div是属于块状元素,会独占一行,其余的元素都会被挤到下一行。你可以用漂浮,定位等手段让两个块状元素并排于一行。你可以去学习一下行内元素和块状元素的区别

PHPerKael
PHPerKael
回复 @漂流绅士 : 受教了
漂流绅士
解决了,在子div中加入box-sizing:border-box就行了,把边界包含进来。
PHPerKael
PHPerKael
回复 @漂流绅士 : 百分比也是可以的,我没记错的话,百分比应该是按照父元素的比例算的
漂流绅士
不好意思,刚刚代码写错了,我用的就是float,把两个Div都设置成了float left; 。定位的那种方法我没有去试过,通过百分比设置应该也是可以的吧?
0
-凡人的智慧-
-凡人的智慧-

两个子div的border导致宽度之和大了4px, 要么width: calc(100% - 2px)要么box-sizing: border-box;

漂流绅士
非常感谢,加了以后确实解决了,讲的很明白。
漂流绅士
我试试
0
c
chaoran521
你加个box sizing
漂流绅士
加了以后确实解决了,非常感谢!
漂流绅士
好的,我试试
返回顶部
顶部