css实现两个div并列显示的多种方法
<p> 方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。</p><div class="jb51code"><pre class="brush:css;">#div1{
width:50%;
height:300px;
background:blue;
float:left;
}
#div2{
width:50%;
height:300px;
background:green;
float:left;
}</pre></div>
<p>方法二：display:table-cell</p>
<div class="jb51code"><pre class="brush:css;">#parent{
width:100%;
display:table;
}
#div1{
width:50%;
height:300px;
background:blue;
display:table-cell;
}
#div2{
width:50%;
height:300px;
background:green;
display:table-cell;
}</pre></div>
<p>方法三：负margin</p>
<div class="jb51code"><pre class="brush:css;">#parent{
display:flex;
overflow:hidden;
}
#div1{
width:50%;
height:300px;
background:blue;
padding-bottom:2000px;
margin-bottom:-2000px;
}
#div2{
width:50%;
height:300px;
background:green;
padding-bottom:2000px;
margin-bottom:-2000px;
}</pre></div>
<p>方法四：绝对定位</p>
<div class="jb51code"><pre class="brush:css;">*{
margin:0;
padding:0;
}
#div1{
width:50%;
height:300px;
background:blue;
position:absolute;
left:0;
top:0;
}
#div2{
width:50%;
height:300px;
background:green;
position:absolute;
transform:translate(100%, 0);
}</pre></div>
<p>方法五：flex布局</p>
<div class="jb51code"><pre class="brush:css;">#parent{
display:flex;
}
#div1{
width:50%;
height:300px;
background:blue;
flex:1;
}
#div2{
width:50%;
height:300px;
background:green;
flex:1;
}</pre></div>
頁:
[1]