CSS之display属性之inline-block布局实现详解
在网页布局的过程中,有时候我们需要把元素放在一行中并且保持元素间的间距,而且元素的大小不确定,这个时候使用inline-block布局可以很好的解决这个问题。
1. inline-block的基本概念
inline-block
是指内联块级元素,这个属性可以让元素以块级元素的方式显示,同时保持元素之间的间距,也可以设置宽度、高度和上、下边距,非常适合用来进行网页布局。
2. 使用inline-block进行水平布局
使用inline-block可以让多个元素水平排列,并且保持元素之间的间距。
2.1 示例1
下面是一个简单的示例可以实现两个div元素的水平排列:
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="box"></div>
<div class="box"></div>
通过display: inline-block;将两个div元素水平排列,设置div的宽度和高度,使得两个div元素大小一致,背景颜色区分。
2.2 示例2
下面的代码演示如何实现使用inline-block水平排列的图文列表布局:
<style>
.container {
text-align: center;
}
.item {
display: inline-block;
width: 200px;
height: 300px;
margin: 0 20px;
text-align: left;
}
.item img {
width: 100%;
}
.item p {
margin-top: 10px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
</style>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
通过display: inline-block;将三个div元素水平排列,设置每个item元素的宽度和高度,和margin值来控制元素的间距。其中 .item img 设置了宽度为100%可以适应不同大小的图片, .item p 设置了 margin-top 等。
3. 使用inline-block进行垂直布局
使用inline-block也可以让多个元素垂直排列,并且保持元素之间的间距。
3.1 示例3
下面是一个简单的示例可以实现两个div元素的垂直排列:
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="box"></div><br>
<div class="box"></div>
通过将第二个div使用
标签实现垂直排列,设置div的宽度和高度,使得两个div元素大小一致,背景颜色区分。
3.2 示例4
下面的代码演示如何实现使用inline-block垂直排列的列表布局:
<style>
.container {
text-align:center;
}
.item {
display: inline-block;
width: 200px;
height: 300px;
margin: 0 20px;
text-align: center;
vertical-align: top;
}
.item img {
width: 100%;
}
.item p {
margin-top: 10px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
</style>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><br>
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><br>
<div class="item">
<img src="https://via.placeholder.com/200x200.png" alt="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><br>
</div>
通过将每个item元素都使用
标签分行,设置每个item元素的宽度和高度,和margin值来控制元素的间距。其中 .item img 设置了宽度为100%可以适应不同大小的图片, .item p 设置了 margin-top 等, 通过 vertical-align: top; 控制布局。
4. 总结
通过inline-block的使用,可以实现多种排版布局,具有良好的可读性,可调整的元素宽度大小,灵活性强等优点。在具体使用时根据实际布局需求来选择合适的布局方式,可以实现很好的页面效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css之display属性之inline-block布局实现详解 - Python技术站