The three-column layout of CSS is mainly fixed in width and adaptive in middle

Here are a few ways to implement a three-column layout

1. The Flex layout

Using flex layout, you can set the parent: display: flex; , set flex: 1 for the middle element;

HTML structure

 <div class="box">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
 </div>
Copy the code

CSS styles

.box {
    height: 100px;
    display: flex;
}
.left,
.right {
    width: 200px;
    height: 100px;
    background-color: red;
}
.main {
    height: 100px;
    flex: 1;
    background-color: yellow;
}
Copy the code

2. Float Float

Use float + margin to achieve a three-column layout

mainWritten in the bookleftandrightBelow, render finally

Set margin to 0 200px for main; Leave width for the left and right boxes so that the contents of the middle boxes are not covered

HTML structure

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div><! -- Mian write below left and right, render last --><div class="main">main</div>
</div>
Copy the code

CSS styles

.box {
    height: 100px;

}
.left,
.right {
    width: 200px;
    height: 100px;
    background-color: red;
}
.left {
    float: left;
}
.right {
    float: right;
}
.main {
    height: 100px;
    /* Leave width for the left and right boxes so that the contents of the middle box are not overwritten */
    margin: 0 200px;
    background-color: yellow;
}

Copy the code

3. Use absolute positioning

The outer boxes are positioned relative to each other, the left and right boxes are absolutely positioned

Set margin to 0 200px for main; Leave width for the left and right boxes so that the contents of the middle boxes are not covered

HTML structure

<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
Copy the code

CSS styles

.box {
    width: 100%;
    height: 100px;
    position: relative;

}
.left,
.right {
    width: 200px;
    height: 100px;
    position: absolute;
    background-color: red;
}
/* Change the position of the left box */
.left {
    left: 0;
    top: 0;
}
/* Change the position of the right box */
.right {
    right: 0;
    top: 0;
}
.main {
    height: 100px;
    margin: 0 200px;
    background-color: yellow;
}
Copy the code

4. Grail layout

Features:

  • 1. Both sides are fixed and the middle is self-adaptive
  • 2. Set the width of the outer box to 0 xx px.
  • Float all three boxes
  • The margin-left negative value of the left box is in percentage units (the actual distance is the width of the middle box)
  • The margin-left negative value of the right box is px, the percentage is not available
  • Sets the relative positioning of the left and right boxes. The value is the width of the left and right boxes

mainWant to be inleft 和 rightAbove, render first

HTML structure

<div class="box">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
Copy the code

CSS styles

.box {
    height: 400px;
    padding: 0 200px;
}
.main {
    float: left;
    width: 100%;
    height: 400px;
    background-color: yellow;
}
.left,
.right {
    float: left;
    position: relative;
    width: 200px;
    height: 400px;
    background-color: red;
}
.left {
	/* The units are percentages */
    margin-left: -100%;
    left: -200px;
}
.right {
	/* The unit is px and the value is the box width */
    margin-left: -200px;
    right: -200px;
}
Copy the code

5. Dual-wing layout

Features:

  • 1. For the middledivContent is not blocked, directly in the middledivInternally create aThe child divFor placing content
  • In the middle of thedivSet up themarginMake room for left and right boxes

Everything else is basically the same as the Grail layout

HTML structure

<div class="box">
        <div class="main">
            <div class="main-wrap">
                #main
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
Copy the code

CSS styles

.box {
    height: 400px;
}
.main {
    width: 100%;
    height: 400px;
    float: left;
    background-color: yellow;
}
.main .main-wrap {
    margin: 0 200px;
}
.left,
.right {
    float: left;
    width: 200px;
    height: 400px;
    background-color: red;
}
.left {
    margin-left: -100%;
    left: -200px;
}
.right {
    margin-left: -200px;
    right: -200px;
}
Copy the code