css左右布局是实现前端页面设计的基础,大部分的布局方式都能分割成左右布局,因此理解左右布局,能使我们在初学css的时候更快理解其他复杂的布局方式。

下面是我罗列的几种css实现前端左右布局的方式:

position: absolute实现

在父级元素内设置两个子元素,绝对定位它们,然后使用百分比将它们分成左右两部分。 这里的好处是,有两个可以容纳自己内容的独立容器。

<section>
<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>
</section> /*以上为html代码*/

section {
color: white;
text-align: center;
}
div {
height: 100%;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
h1 {
font-size: 20px;
}
.left-half {
background-color: #ea68a2;
position: absolute;
left: 0px;
width: 50%;
}
.right-half {
background-color: pink;
position: absolute;
right: 0px;
width: 50%;
}

table实现

table布局是页面布局中使用的最早的布局方式,随着前端技术的发展,table布局由于自身的局限性逐渐被div布局取代。

<section>
<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>
</section>

body {
color: white;
text-align: center;
}
h1 {
font-size: 20px;
}
div {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 50%;
padding: 50px;
}
.left-half {
background: #ea68a2;
}
.right-half {
background: pink;
}

float实现

float属性是css中关于布局的一个关键属性,可以产生脱离文档流的布局现象,其left属性值使该区域向父级标签区域的左侧边界放置,right属性值使该区域块向父级标签的右侧边界放置,利用该属性可以实现左右布局。

<section>
<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>
</section>

html, body, section, div {
height: 80%;
}
body {
color: white;
text-align: center;
}
section {
width: 100%;
}
article {
position: relative;
top: 50%;
left: 50%;
padding: 1rem;
transform: translate(-50%, -50%);
}
h1 {
font-size: 20px;
}
.left-half {
background-color: #ea68a2;
float: left;
width: 50%;
}
.right-half {
background-color: pink;
float: left;
width: 50%;
}

对于float对后面同级元素的影响,既可以采用margin进行影响的清除,还可以在受影响的元素上添加overflow:hidden来清除浮动对该区域块带来的影响。

Inline-Block实现

display:inline-block属性是介于行内元素(display: inline)和块级元素(display: block)之间的属性,它既可以像行内元素一样水平布局,也可以像块级元素设置宽高属性,所以左右布局可以利用它这种属性。

<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div><div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>

* {
box-sizing: border-box;
}
html, body, div {
height: 80%;
}
body {
color: white;
text-align: center;
}
article {
position: relative;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
h1 {
font-size: 25px;
}
div {
display: inline-block;
vertical-align: top;
width: 50%;
}
.left-half {
background: #ea68a2;
}
.right-half {
background: pink;
}

flexbox实现

css3中出现了弹性盒子flexbox布局,使用这种方法,可以将父级容器变成一个灵活的盒子,子容器占用相等的份额, 无需再设置宽高。

<section class="container">
<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>
</section>

html, body, section {
height: 80%;
}
body {
color: white;
text-align: center;
}
div{
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
font-size: 25px;
}
.container {
display: flex;
}
.left-half {
background-color: #ea68a2;
flex: 1;
}
.right-half {
background-color: pink;
flex: 1;
}

grid实现

CSS Grid(网格) 布局技术就像是Flexbox和Table的混合体,你可以通过将 CSS 规则应用于父元素(成为 Grid Container 网格容器)和其子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid 布局。

<section class="container">
<div class="left-half">
<article>
<h1>Left Half</h1>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
</article>
</div>
</secion>

html, body, section, div {
height: 100%;
}
body {
color: white;
}
article {
position: relative;
top: 50%;
text-align: center;
transform: translate(0, -50%);
}
h1 {
font-size: 25px;
}
.container {
display: grid;
}

.left-half {
background: #ea68a2;
grid-column: 1;
}
.right-half {
background: pink;
grid-column: 2;
}

作为比较新兴的布局技术,相信在未来的前端发展中,Grid 布局技术会越来越受到广大开发者的青睐。

以上就是我自己总结及结合文档所列出的6种css实现前端左右布局的方式,如还有其他方式,欢迎大家告诉我。



CSS      CSS 布局

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!