我遇到的 CSS 并排布局（不停更新）

最新推荐文章于 2023-04-27 17:41:14 发布

Yoyo要去哪里

最新推荐文章于 2023-04-27 17:41:14 发布

阅读量202

点赞数 1

分类专栏： css布局文章标签： CSS 并排布局

本文链接：https://blog.csdn.net/weixin_40312266/article/details/102025490

版权

css布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，利用display:inline-block，将块级元素行块化

使用情形及效果：各个div块并排，被一个块级的div包裹

html文档操作如下：

<div class='container'>
   <div class="box"> div 1</div>
   <div class="box"> div 2</div>
   <div class="box"> div 3</div>
   <div class="box"> div 4</div>
    <div class="box"> div 5</div>
</div>

<div class="container">kkk</div>   // 这个div（class="container"）块与上面的div（class="container"）块互不干扰

效果如下：

主要CSS:附上每个属性的理解

div.box
{
width:32%; //因为父级div class='container'默认有宽度，此处可以使用父块的百分比宽度调整子块的宽度
background:blue; //背景色
margin:1px; //外边距大小

//重点属性：将默认块级的div装换成行块级，这样就不会每块都自动换行了，同时块级的属性可以生效
display:inline-block;
line-height:50px; //因为父级块没有内容，没有高，此处通过字体的行高属性调整div的高
}

全代码：

<!DOCTYPE html>
<html>
<head>
<style>
div.box
{
width:32%;
background:blue;
margin:1px;
display:inline-block;
line-height:50px;
}
</style>
</head>
<body>

<div class='container'>
   <div class="box"> div 1</div>
   <div class="box"> div 2</div>
   <div class="box"> div 3</div>
   <div class="box"> div 4</div>
    <div class="box"> div 5</div>
</div>

<div class="container">kkk</div>
</body>
</html>