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如果灵活的应用，可以达到很好的效果。