css实现两个div填满一行

最新推荐文章于 2024-05-19 23:05:56 发布

YinghaoGuo

最新推荐文章于 2024-05-19 23:05:56 发布

阅读量3.2w

点赞数 12

分类专栏： css篇文章标签： css div并排填满一行

本文链接：https://blog.csdn.net/qq_22855325/article/details/72874906

版权

css篇专栏收录该内容

9 篇文章 0 订阅

订阅专栏

有如下代码：

body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
        }
 #main{
            width: 800px;
            height: 300px;
            border: solid black 1px;
            position: absolute;
        }
<body>
<div id ="main">
 <div id="one"> dgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdgdgfdg </div>
 <div id="two"> 哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈 </div>
</div>
</body>

让#one和#two在#main中各占一半（占比多少都不重要）显示有哪些方法呢？

方法一：使用float浮动

 #one{
            float: left;
            /*display: inline-block;*/
            width: 50%;
            height: 40%;
            word-wrap: break-word;
            border-bottom: 3px solid red;
        }
  #two{
            /*display: inline-block;*/
            float: right;
            position: relative;
            width: 50%;
            height: 40%;
            border-bottom: 3px solid green;
        }

上述方法不唯一，可以将one设置为float：left，two设置为float：right或display：inline-block；也可以将one设置为display：inline-block，two设为float：right；但是只同时设置为inline-block不设置float却不可以。这里要注意的是，width的80%和20%刚好能将100%的空间填满，所以如果两个区域设置了border-left/right，将不能在同一行显示。
注：元素设置float之后，该元素会脱离文档流，其周围元素会受到影响。

方法二：使用position定位和left:*px

#one{
            display: inline-block;
            position: relative; //可有可无
            width: 50%;
            height: 40%;
            word-wrap: break-word;
            border-bottom: 3px solid red; 
	    box-sizing:border-box;  //存在border-left/right时或者padding时，使用border-box属性更好布局
 } 
#two{ 
           display: inline-block;
           position: absolute; 
           width: 50%;
           height: 40%;
           left: 50%; //相对于父元素，左侧的80%宽度为#one
           border-bottom: 3px solid black;
 }

这里要说一下box-sizing属性，该属性用于规定带border或padding的盒子模型的表现形式，上述例子中，如果不设置box-sizing属性，在没有border-left/right以及padding的时候可以正常以百分比展示两个div，并且80%和20%的宽度不超出父元素；如果存在左右border或者左右padding，两个div在同一行显示出来就超出了父元素的大小。
我们知道盒子模型包含position值，margin值，border值，padding值，以及中间的内容区content值，所有宽高加起来构成了整一个盒子模型。如果定义一个div（盒子）的width和height，默认情况下（box-sizing:content-box）该宽高为内容区content的宽高，而不包含border，padding值。
而box-sizing的还有另一个属性值border-box，如果给div（盒子）设置了box-sizing:border-box，定义了width和height值，那么该宽高值就包含了content以及border，padding值的总和。即width = border-left + border-right + padding-left + padding-right ，通过已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。这样一来，为两个容器同时设置宽度50%，再设定padding值和border值，两个容器的宽度总和就刚好填满父容器，不会超出。

方法三：使用display:flex布局(父容器使用flex布局后，子元素的float、clear和vertical-align属性将失效)
使用flex布局可以说是个我个人很推荐的方法，因为flex弹性布局能实现的不仅仅是2个容器平分父容器宽高，理论上能实现n个容器平分父容器宽高（flex的能力还不只如此）。其兼容性如下：

display:flex布局在移动端是个很不错的选择，回归问题，首先看如何实现2个元素（内部div在父容器内称为元素）平分父容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #main{
            width: 800px;
            height: 300px;
            border: solid black 1px;
            display:flex;
            display: -webkit-flex;
        }
        #one{
            -webkit-flex: 1;
            flex: 1;
            height: 50%;
            background-color: yellow;
        }
        #two{
            height: 50%;
            -webkit-flex: 1;
            flex: 1;
            background-color: red;
        }
        #three{
            height: 50%;
            -webkit-flex: 1;
            flex: 1;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="one">
        哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈
    </div>
    <div id="two">
        哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈
    </div>
    <!--<div id="three">
        哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈
    </div>-->
</div>
</body>
</html>

如上，父容器设定display:flex;弹性布局方式，内部元素设定flex值，父容器会将内部元素flex值进行加和，这里加和为2，就平分成2份，每个元素占有1份，即两个元素平分了外部容器宽度。
更多内容请参见阮一峰老师的： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

YinghaoGuo

关注

12
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
css实现两个div填满一行

有如下代码：body{ width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; } #main{ width: 800px; ...
复制链接

扫一扫