前端一道面试题 如何让两个div平行排列均分且没有边距
程序员文章站
2022-05-26 16:15:09
...
方式一
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 40px;
background-color: khaki;
}
.box_1,.box_2{
width: 50%;
height: 100%;
display: inline-block;
}
.box_1{
background-color: lawngreen;
}
.box_2{
float: right;
background-color: lightcoral;
}
效果展示:
方式二
.box{
width: 100%;
height: 40px;
background-color: lightcoral;
display: flex;
flex-direction: row;
}
.box_1,.box_2{
width: 50%;
height: 100%;
}
.box_1{
background-color: lightgreen;
}
.box_2{
background-color: blueviolet;
}
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
效果展示
方式三
.box{
width: 100%;
height: 40px;
background-color: brown;
position: relative;
}
.box_1,.box_2{
width: 50%;
height: 100%;
position: absolute;
}
.box_1{
background-color: burlywood;
}
.box_2{
background-color: cadetblue;
}
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
效果展示
上一篇: Python数据结构与算法——Day3
下一篇: 夏天我注定离不开空调和西瓜