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

前面的话

　　等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的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>

<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>

【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>

<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>

【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>

<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>

思路二: 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>

<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>

【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>

<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>

【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>

<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>

思路三: table

　　缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为<table>结构。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;
    height: 100px;
    padding-right: 20px;
}
</style>

<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>

【2】table + 兄弟选择器

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

<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>

思路四: flex

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

<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>

时间： 2024-10-29 19:06:20

实现CSS等分布局的4种方式的相关文章

页面布局的几种方式

基本布局的几种方式: (1)流体布局: 流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同.固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性.换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸.流布局与媒体查询和优化样式技术的关系密切. (2)固定布局在固定布局中,网页的宽度是必须指定为一个像素值,一般设为960像素.在过去,

android中填充界面布局的三种方式

改变原来界面布局的三种方式: 1.第一种方式: LayoutInflater li = LayoutInflater.from(this); 具体代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activ

css左右布局的几种实现方式和优缺点

记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定: html代码如下: <div class="parent"> <div class="left"></div> <div class="right"></div> </div> 1.flex布局实现左右布局,css代码如下: .parent{ width: 60

CSS全屏布局的5种方式

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结前面的话全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的5种思路思路一: float [1]float + calc 通过calc()函数计算出.middle元素的高度,并设置子元素高度为100% <style> body,p{margin: 0;} body,html,.parent{height: 100%;} .middle{

css清除浮动的几种方式，哪种最合适？

细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动.具体代码如下所示: 由上图可以看出,在给span添加了float之后,父级元素div的高度就变成了0.我们有以下几种方式来解决这个问题 (1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了

实现顶部轮播，下部listview经典布局的两种方式

开头: 在做android开发的时候,我们经常会遇到这样的布局,上面是一个图片轮播图,下面是一些列表的项目.很多新闻app,视频类app都采用这样的布局.起初的时候由于没有很多参考,我自己想到了一种实现方式,就是用scrollview作为外面最大的布局,然后里面嵌套viewpager和listview,但是我现在非常不推荐这种方式,一方面由于这种方式需要将listview完全展开,缺少了getview函数中应该有的复用与优化.而且结构嵌套复杂.经过一番查找与学习,学习到两种比较规范或者结构比

css清除浮动的两种方式（clearfix和clear）

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

CSS 清除浮动的几种方式

第一种方式: 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="/img/news-pic.jgp" alt="my pic" /> &l