div 水平排列
display: flex
Flex 布局 最简单的一种方式 ，css3 新增。父级 div 直接使用 display: flex; 即可
html
<h3>display: flex</h3>
<div class="display-flex">
<div class="div-size">1</div>
<div class="div-size">2</div>
<div class="div-size">3</div>
</div>css
.display-flex {
display: flex;
}
.div-size {
border: 1px solid red;
width: 200px;
height: 120px;
margin: 10px;
}
float: left
浮动的方式实现水平布局，这种布局方式已经很少用了。（注意设置浮动的元素会影响下面元素的正常排列，设置 clear: both; 即可解决）
html
<h3>float: left</h3>
<div>
<div class="float-left">4</div>
<div class="float-left">5</div>
<div class="float-left">6</div>
</div>
<div class="clear"></div>css
.float-left {
float: left;
border: 1px solid yellowgreen;
width: 200px;
height: 120px;
margin: 10px;
}
.clear {
clear: both;
}
display:inline-block
行内块元素。（CSS2.1 新增的值）
html
<h3>display: inline-block</h3>
<div>
<div class="inline-block">7</div>
<div class="inline-block">8</div>
<div class="inline-block">9</div>
</div>css
.inline-block {
display: inline-block;
border: 1px solid blue;
width: 200px;
height: 120px;
margin: 10px;
}
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
