Given a height is known, please write three-column layout, where the left column, the width of each of the right column 300 px, intermediate adaptation.
That intermediate adaptive intermediate box can be automatically adjusted as the size or the size of the sub-elements in the browser window size, the intermediate box can be fixed width, which is the size of a child element distraction.
To achieve the required topic in the next five ways.
1. float layout
<!-- float 布局 -->
<section class="layout float">
<style media="screen">
/* 清除浮动 */
.left-right-center::after {
content: '';
clear: both; /* 使两边没有浮动元素 */
display: block;
height: 0;
visibility: hidden;
}
/* float布局 */
.float .left {
float: left;
width: 300px;
background-color: yellow;
}
.float .right {
float: right;
width: 300px;
background-color: pink;
}
.float .center {
background-color: red;
}
</style>
<h1>float布局</h1>
<!-- article作为容器将左中右三块包裹起来 -->
<article class="left-right-center">
<!-- 划分左中右三个模块 -->
<div class="left">left</div>
<div class="right">right</div>
<!-- 中间写一些内容撑开盒子 -->
<div class="center">
<h1>浮动解决方案</h1>
<img src="./慧思图标.png" alt="">
1. 这是浮动解决方案
</div>
</article>
</section
Here we must emphasize the point .left, and .rightthe order of the elements can not be reversed if the reversal of the following results appear.
This is because the right-floating elements will try and rely on the right, but now due to the center element will occupy the entire line above, so it can not rely on up, so try to rely on the center to the following elements then the right as far as possible, thus indicating the position shown in FIG.
If the right elements on the top center of the element, this time there is no center as much as possible against the elements on the right will be displayed at the top and to the right location. With the center element when, due to the float element is out of the document flow, so the center can occupy a whole against the top line. And because float elements without departing from the text flow, so the child element center element can not appear in the following elements of the left, but appeared in the left left elements. (Note that not just words, even if the center is loaded in a picture element will not appear in the following elements of the left, in short, all the sub-elements will not appear in the following left elements)
2. Absolute positioning
<!-- absolute 布局 -->
<section class="layout absolute">
<style media="screen">
.absolute .left-right-center {
position: relative;
}
.absolute .left {
position: absolute;
width: 300px;
left: 0;
background-color: rgb(105, 170, 67);
}
.absolute .right {
position: absolute;
width: 300px;
right: 0;
background-color: bisque;
}
.absolute .center {
position: absolute;
left: 300px;
right: 300px;
background-color:rgb(106, 19, 219);
}
</style>
<h1>absolute布局</h1>
<!-- article作为容器将左中右三块包裹起来 -->
<article class="left-right-center">
<!-- 划分左中右三个模块 -->
<div class="left">left</div>
<!-- 中间写一些内容撑开盒子 -->
<div class="center">
<h1>绝对定位</h1>
<img src="./慧思图标.png" alt="">
1. 这是绝对定位方案
</div>
<div class="right">right</div>
</article>
</section>
Since both sides of the element width is fixed, so the middle element is not positioned but set margin: 0 300px; there will be the following circumstances, it is not clear why, if there is to know the trouble to explain, thank you.
3. flex-box layouts
<!-- flexbox 布局 -->
<section class="layout flex-box">
<style>
.flex-box .left-right-center {
display: flex;
}
.flex-box .left {
flex: none;
width: 300px;
background-color: rgb(228, 116, 116);
}
.flex-box .right {
flex: none;
width: 300px;
background-color: rgb(212, 131, 32);
}
.flex-box .center {
flex: 1;
background-color:rgb(26, 128, 119);
}
</style>
<h1>flex-box布局</h1>
<!-- article作为容器将左中右三块包裹起来 -->
<article class="left-right-center">
<!-- 划分左中右三个模块 -->
<div class="left">left</div>
<!-- 中间写一些内容撑开盒子 -->
<div class="center">
<h1>flex-box布局</h1>
<img src="./慧思图标.png" alt="">
1. 这是flex-box布局方案
</div>
<div class="right">right</div>
</article>
</section>
Fixed width on both sides of the intermediate element adaptive.
4. table layout
<!-- table 布局 -->
<section class="layout table">
<style>
.table .left-right-center {
width: 100%;
display: table;
}
.table .left-right-center>div {
display: table-cell;
}
.table .left {
width: 300px;
background-color: rgb(218, 42, 42);
}
.table .right {
width: 300px;
background-color: rgb(82, 35, 49);
}
.table .center {
background-color:rgb(44, 62, 167);
}
</style>
<h1>table布局</h1>
<!-- article作为容器将左中右三块包裹起来 -->
<article class="left-right-center">
<!-- 划分左中右三个模块 -->
<div class="left">left</div>
<!-- 中间写一些内容撑开盒子 -->
<div class="center">
<h1>table布局</h1>
<img src="./慧思图标.png" alt="">
1. 这是table布局方案
</div>
<div class="right">right</div>
</article>
</section>
The article element as a table, and the width of the page width is equal, by providing the display: table-cell disposed the left-right element for the cell, wherein the left element width 300 px, right element width 300 px, center element width is not set width width adaptation.
6. grid layout
<!-- 网格布局 -->
<section class="layout grid">
<style>
.grid .left-right-center {
display: grid;
/* 网格每行的宽度与页面宽度相等 */
width: 100%;
/* 网格每行的高度 */
grid-template-rows: 120px;
/* 左侧宽度300px，中间自适应，右侧宽度300px */
grid-template-columns: 300px auto 300px;
}
.grid .left {
background-color: rgb(16, 138, 53);
}
.grid .right {
background-color: rgb(238, 13, 118);
}
.grid .center {
background-color:rgb(196, 184, 26);
}
</style>
<h1>网格布局</h1>
<!-- article作为容器将左中右三块包裹起来 -->
<article class="left-right-center">
<!-- 划分左中右三个模块 -->
<div class="left">left</div>
<!-- 中间写一些内容撑开盒子 -->
<div class="center">
<h1>网格布局</h1>
<img src="./慧思图标.png" alt="">
1. 这是网格布局方案
</div>
<div class="right">right</div>
</article>
</section>
By display: gridgrid displays article element setting, by grid-template-columns: 300px auto 300px;setting three grid line, the grid width is left 300 px, adaptive intermediate right grid width 300px.
7. inline-block layout
inline-block may also be used as a layout, but not suitable for such an intermediate case requires adaptive, under suitable conditions given layout width.
Complete code: achieve three-column layout of the five methods source code
Results of the:
Finished, if inappropriate place, please correct me.