设置同行多个并列块显示
- 设置父元素宽高,fontsize为0,解决空格问题
- 设置子元素的fontsize不为0,才可以显示,如果统一高度,就设置一个定高,宽度可以感觉要求用百分比,因为inline-block,如果字段过长,会出现溢出,所以子元素还需要设置
- 子元素设置定宽使所有子元素宽度加起来100%,可以保证不会让后边的元素换行
- 设置子元素overflow:auto,防止溢出,这时会出现一个不对齐问题,原因是默认的vertical-align是baseline,需要改成top|bottom|middle
- 当然,同行并列块还可以用flex和table进行布局,但是这个切记要注意兼容性,注意flex如果需要用到伪元素需要小心
- table布局爬坑:父级display:table;且设置宽度width:100%;table-layout: fixed;使子元素局限于他们的宽度;子元素display:table-cell;overflow:auto;防止溢出;居中在子元素设置vertical-align:middle;注意如果有滚动条,会有所偏差;默认是baseline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{height: 100px;background: lightcoral;font-size: 0;}
.child{display: inline-block;background: lightgreen;font-size: 10px;overflow: auto;vertical-align: middle;}
.child:first-child{width: 30%;background: lightseagreen;}
.child:last-child{width: 70%;font-size: 20px;}
.flex{display: flex;height: 100px;align-items: center;justify-content: space-between;background: lightcoral;}
.flex .item{overflow: auto;}
.flex .item:nth-child(1){width:30%;background: lightgreen;}
.flex .item:nth-child(2){width:20%;background: lightseagreen;font-size: 40px;}
.flex .item:nth-child(3){width:50%;background: lightskyblue;font-size: 20px;}
.table{display: table;width:100%;height: 100px;background: lightcoral;table-layout: fixed;}
.table .item{display: table-cell;overflow: auto;}
.table .item:nth-child(1){width:30%;background: lightgreen;}
.table .item:nth-child(2){width:20%;background: lightseagreen;font-size: 40px;}
.table .item:nth-child(3){width:50%;background: lightskyblue;font-size: 20px;}
</style>
</head>
<body>
<h1>inline-block demo</h1>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2</div>
</div>
<h1>设置同行多个并列块显示(使用inline-block)</h1>
<ol>
<li>设置父元素宽高,fontsize为0,解决空格问题</li>
<li>设置子元素的fontsize不为0,才可以显示,如果统一高度,就设置一个定高,宽度可以感觉要求用百分比,因为inline-block,如果字段过长,会出现溢出,所以子元素还需要设置</li>
<li>子元素设置定宽使所有子元素宽度加起来100%,可以保证不会让后边的元素换行</li>
<li>设置子元素overflow:auto,防止溢出,这时会出现一个不对齐问题,原因是默认的vertical-align是baseline,需要改成top|bottom|middle</li>
</ol>
<p>当然,同行并列块还可以用flex和table进行布局,但是这个切记要注意兼容性,注意flex如果需要用到伪元素需要小心</p>
<div class="flex">
<div class="item">child1</div>
<div class="item">child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2</div>
<div class="item">child3child3child3child3child3child3child3child3child3child3</div>
</div>
<hr>
<div class="table">
<div class="item">child1</div>
<div class="item">child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2</div>
<div class="item">child3child3child3child3child3child3child3child3child3child3</div>
</div>
<p>table布局爬坑:父级display:table;且设置宽度width:100%;table-layout: fixed;使子元素局限于他们的宽度;子元素display:table-cell;overflow:auto;防止溢出;居中在子元素设置vertical-align:middle;注意如果有滚动条,会有所偏差;默认是baseline</p>
</body>
</html>
网友评论