实现CSS等分布局的4种方式_html/css_WEB-ITnose-HTML-Tutorial-php.cn

× 目录 [1]float [2]inline-block [3]table [4]flex

前面的话

　　等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式

思路一: float

　　缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差

【1】float + padding + background-clip

　　使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    overflow: hidden;}.child{    float: left;    height: 100px;    width: 25%;    padding-right: 20px;    box-sizing: border-box;    background-clip: content-box;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

Nach dem Login kopieren

【2】float + margin + calc

　　使用margin实现子元素之间的间距，使用calc()函数计算子元素的宽度

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    overflow: hidden;    margin-right: -20px;}.child{    float: left;    height: 100px;    width: calc(25% - 20px);    margin-right: 20px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

Nach dem Login kopieren

【3】float + margin + (fix)

　　使用margin实现子元素之间的间距，通过增加结构来实现兼容

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    overflow: hidden;    margin-right: -20px;}.child{    float: left;    width: 25%;}.in{    margin-right: 20px;    height: 100px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

Nach dem Login kopieren

思路二: inline-block

　　缺点：需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【1】inline-block + padding + background-clip

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    font-size: 0;    margin-right: -20px;    overflow: hidden;}.child{    display:inline-block;    vertical-align: top;    width: 25%;    padding-right: 20px;    box-sizing: border-box;    background-clip: content-box;    font-size: 16px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

Nach dem Login kopieren

【2】inline-block + margin + calc

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    font-size: 0;}.child{    display: inline-block;    vertical-align: top;    font-size: 16px;    height: 100px;    width: calc(25% - 20px);    margin-right: 20px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

Nach dem Login kopieren

【3】inline-block + margin + (fix)

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    font-size: 0;}.child{    display: inline-block;    vertical-align: top;    font-size: 16px;    width: 25%;}.in{    margin-right: 20px;    height: 100px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

Nach dem Login kopieren

思路三: table

　　缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为

结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

【1】table + margin负值

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    display: table;    width: calc(100% + 20px);    table-layout: fixed;}.child{    display: table-cell;    padding-right: 20px;}.in{    height: 100px;}</style>

Nach dem Login kopieren

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

Nach dem Login kopieren

【2】table + 兄弟选择器

<style>body,p{margin: 0;}.parent{    display: table;    width: 100%;    table-layout: fixed;}.child{    display: table-cell;}.child + .child{    padding-left: 20px;}.in{    height: 100px;}</style>

Nach dem Login kopieren

<div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: blue;">        <div class="in" style="background-color: lightblue;">1</div>    </div>    <div class="child" style="background-color: green;">        <div class="in" style="background-color: lightgreen;">2</div>    </div>    <div class="child" style="background-color: orange;">        <div class="in" style="background-color: lightsalmon;">3</div>    </div>    <div class="child" style="background-color: red;">        <div class="in" style="background-color: pink;">4</div>    </div>                </div>

Nach dem Login kopieren

思路四: flex

<style>body,p{margin: 0;}.parent{    display: flex;}.child{    flex:1;    height: 100px;}.child + .child{    margin-left: 20px;}</style>

Nach dem Login kopieren

<div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: lightblue;">1</div>    <div class="child" style="background-color: lightgreen;">2</div>    <div class="child" style="background-color: lightsalmon;">3</div>    <div class="child" style="background-color: pink;">4</div>                </div>

Nach dem Login kopieren

Verwandte Etiketten：

实现CSS等分布局的4种方式

Quelle：php.cn

Vorheriger Artikel：CSS等高布局的6种方式_html/css_WEB-ITnose Nächster Artikel：web开发中遇见的困难_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors