css实现两个div填满⼀⾏
有如下代码：
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;borderbox
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div id="one">
哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈    </div>
<div id="two">
哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈    </div>
<!--<div id="three">
哈啊哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈    </div>-->
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。