We often encounter layout problems in daily development, the following list of several commonly used CSS layout scheme not to say more, on the code!

Centered layout

The following center layout is based on the premise of variable width, including the fixed width

1, horizontal center

a) inline-block + text-align

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}
Copy the code

IE567 does not support inline-block, so you need to use CSS hack for compatibility

b) table + margin

.child{
    display: table;
    margin: 0 auto;
}
Copy the code

Tips: This solution is compatible with IE8, you can use

instead of CSS, compatibility is good

c) absolute + transform

.parent{
    position: relative;
    height:1.5 em;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(50%); }Copy the code

Tips: This scheme is compatible with IE9 because transform compatibility is limited. If.child is a fixed-width element, it can be written as follows


.parent{
    position: relative;
    height:1.5 em;
}
.child{
    position: absolute;
    width:100px;
    left: 50%;
    margin-left: -50px;
}
Copy the code

d) flex + justify-content

.parent{
    display: flex;
    justify-content: center;
}
.child{
    margin: 0 auto;
}
Copy the code

Flex is a powerful CSS that is designed for layout. It can easily meet all kinds of requirements for centered, balanced, and bisected layouts. However, due to current browser compatibility issues, this solution is rarely used, but it is worth looking forward to the day when browser compatibility is good!

2, vertical

a) table-cell + vertial-align

.parent{
	display: table-cell;
	vertical-align: middle;
}
Copy the code

Tips: Can be replaced with

layout, good compatibility

b) absolute + transform

.parent{
	position: relative;
}
.child{
	position: absolute;
	top: 50%;
	transform: translateY(50%); }Copy the code

Tips: There are CSS3 compatibility problems, good fixed-width compatibility

c) flex + align-items

.parent{
	display: flex;
	align-items: center;
}
Copy the code

Tips: Compatible with older browsers, not with younger ones

3. Horizontal and vertical

a) inline-block + table-cell + text-align + vertical-align

.parent{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.child{
	display: inline-block;
}
Copy the code

B) Absolute + transform

.parent{
	position: relative;
}
.child{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(50%, 50%); }Copy the code

C) Flex compatible with IE10 or above

.parent{
	display: flex;
	justify-content: center;
	align-items: center;
}
Copy the code

Tips: Poor compatibility

Multi-column layouts

1, a column of fixed width, a column of adaptive

a) float + margin

.left{
	float: left;
	width: 100px;
}
.right{
	margin-left: 120px;
}
Copy the code

B) float + overflow C) float + overflow D) float + overflow

.left{
	float: left;
	width: 100px;
	margin-right: 20px;
}
.right{
	overflow: hidden;
}
Copy the code

No matter how many columns are fixed width or variable width, this scheme can be perfectly realized, and can realize the layout of c) table

.parent{
	display: table; width: 100%;
	table-layout: fixed;
}
.left..right{
	display: table-cell;
}
.left{
	width: 100px;
	padding-right: 20px;
}
Copy the code

d) flex

.parent{
	display: flex;
}
.left{
	width: 100px;
	padding-right: 20px;
}
.right{
	flex: 1;
}
Copy the code

2, multiple columns of fixed width, a column of adaptive

a) float + overflow

.left..center{
	float: left;
	width: 100px;
	margin-right: 20px;
}
.right{
	overflow: hidden;
}
Copy the code

b) table

.parent{
	display: table; width: 100%;
	table-layout: fixed;
}
.left..center..right{
	display: table-cell;
}
.right{
	width: 100px;
	padding-right: 20px;
}
Copy the code

c) flex

.parent{
	display: flex;
}
.left..center{
	width: 100px;
	padding-right: 20px;
}
.right{
	flex: 1;
}
Copy the code

3, a column of variable width, a column of adaptive

a) float + overflow

.left{
	float: left;
	margin-right: 20px;
}
.right{
	overflow: hidden;
}
.left p{width: 200px; }Copy the code

b) table

.parent{
	display: table; width: 100%;
}
.left..right{
	display: table-cell;
}
.left{
	width: 0.1%;
	padding-right: 20px;
}
.left p{width:200px; }Copy the code

c) flex

.parent{
	display: flex;
}
.left{
	margin-right: 20px;
}
.right{
	flex: 1;
}
.left p{width: 200px; }Copy the code

4, many columns of variable width, a column of adaptive

a) float + overflow

.left..center{
	float: left;
	margin-right: 20px;
}
.right{
	overflow: hidden;
}
.left p..center p{
	width: 100px;
}
Copy the code

5, equal

.parent{
	margin-left: -20px;
}
.column{
	float: left;
	width: 25%;
	padding-left: 20px;
	box-sizing: border-box;
}
Copy the code

b) table + margin

.parent-fix{
	margin-left: -20px;
}
.parent{
	display: table;
	width:100%;
	table-layout: fixed;
}
.column{
	display: table-cell;
	padding-left: 20px;
}
Copy the code

c) flex

.parent{
	display: flex;
}
.column{
	flex: 1;
}
.column+.column{
	margin-left:20px;
}
Copy the code

6, such as

.parent{
	overflow: hidden;
}
.left..right{
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}
.left{
	float: left; width: 100px;
}
.right{
	overflow: hidden;
}
Copy the code

b) table

.parent{
	display: table; 
	width: 100%;
}
.left{
	display:table-cell; 
	width: 100px;
	margin-right: 20px;
}
.right{
	display:table-cell; 
}
Copy the code

c) flex

.parent{
	display:flex;
	width: 100%;
}
.left{
	width: 100px;
}
.right{
	flex:1;
}
Copy the code

Side by side, evenly aligned, single row to the left

rendering

flex

.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    display: inline-block;
}
.empty{
    height: 0;
    visibility: hidden;
}
Copy the code

For details, please see github.com/zwwill/blog…

Holy Cup layout & Twin wings layout

[Solution] Holy Grail layout & Twin wing layout

The holy grail layout

“Demo” codepen. IO/zwwill/pen /…

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">main</div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>
Copy the code
.container {width: 500px; margin: 50pxauto; }.wrapper {padding: 0 100px 0 100px; }.col {position: relative; float: left; }.header..footer {height: 50px; }.main {width: 100%;height: 200px; }.left {width: 100px; height: 200px; margin-left: -100%;left: -100px; }.right {width: 100px; height: 200px; margin-left: -100px; right: -100px; }.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; }Copy the code

Twin wing layout

Ps: “Isn’t this the same picture?” “Rightness! It’s the same, because it solves the same kind of problem.”

“Demo” codepen. IO/zwwill/pen /…

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>
Copy the code
.col {float: left; }.header {height: 50px; }.main {width: 100%; }.main-wrap {margin: 0 100px 0 100px;height: 200px; }.left {width: 100px; height: 200px; margin-left: -100%; }.right {width: 100px; height: 200px; margin-left: -100px; }.footer {height: 50px; }.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; }Copy the code

Locate the layout

Simple absolute positioning will solve the problem, why the Grail and wings? why

<div class="header">header</div>
<div class="wrapper">
    <div class="main col">
        main
    </div>
    <div class="left col">
        left
    </div>
    <div class="right col">
        right
    </div>
</div>
<div class="footer">footer</div>
Copy the code
.wrapper { position: relative; } .main { margin:0 100px; } .left { position: absolute; left: 0; top: 0; } .right { position: absolute; right: 0; top: 0; }Copy the code

Github: github.com/zwwill/css-…

Please mark the source of reprint

Starting: github.com/zwwill/blog… Author: Kiwa