本文主要是介绍html的两个div同行,两个div同行显示问题（两栏布局），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题描述：如何将两个块放在同一行相同大小，横向占满屏幕？
效果图如下：
image.png
html(以下所有方法通用此html):
css：
(1)flex弹性布局(此时子元素的float、clear和vertical-align属性将失效)
.main{
display:flex;/*子元素分块和为父元素总块数*/
}
.left{
flex:1;/*用于控制占比分块，平铺则两块div的flex相同即可达到五五开效果。*/
height:100px;
background-color:red;
}
.right{
flex:1;
height:100px;
background-color:blue;
}
(2)float(因脱离文档流，需清除浮动,共3种方法)
.main{
clear:both;/*清除浮动*/
}
.left{
float:left;
height:100px;
width:50%;
background-color:red;
}
.right{
float:right;/*由于五五开，这里left和right均可*/
width:50%;
height:100px;
background-color:blue;
}
(3)inline-block(中间有从body继承过来的margin，需处理,不同盒子模型有所区别)
.main{
font-size:0;/*处理margin问题*/
}
.left{
display:inline-block;
height:100px;
width:50%;
background-color:red;
/*margin-right:-8px; 不推荐此种方式*/
}
.right{
display:inline-block;
width:50%;
height:100px;
background-color:blue;
}
(4)position:absolute;
.main{
}
.left{
height:100px;
width:50%;
background-color:red;
position:absolute;
/*float:left也可*/
}
.right{
margin-left:50%;
width:50%;
height:100px;
background-color:blue;
}
方法很多，这里只是给出几种常用思路，也可混用来达到效果。在页面布局的时position:absolute如果灵活的应用，可以达到很好的效果。
这篇关于html的两个div同行,两个div同行显示问题（两栏布局）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
