Dada uma altura é conhecida, por favor escreva o layout de três colunas, onde a coluna esquerda, a largura de cada um o direito coluna de 300 px, adaptação intermédia.
Essa caixa intermédia adaptativo intermediário pode ser ajustada automaticamente como o tamanho ou o tamanho dos sub-elementos no tamanho da janela de navegador, a caixa intermédia pode ser fixo largura, que é do tamanho de um elemento de distracção criança.
Para alcançar o tópico necessário nos próximos cinco maneiras.
1. layout do flutuador
<!-- 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
Aqui devemos enfatizar o ponto .left, e .righta ordem dos elementos não pode ser revertida se a reversão das seguintes resultados aparecem.
Isso ocorre porque os elementos flutuantes direita vai tentar invocar o direito, mas agora devido ao elemento central vai ocupar toda a linha acima, de modo que não pode confiar em cima, de modo a tentar contar com o centro para os seguintes elementos em seguida, a direita, na medida do possível, indicando assim a posição mostrada na FIG.
Se os elementos certos no centro da parte superior do elemento, desta vez não existe um centro, tanto quanto possível contra os elementos à direita será exibida na parte superior e para o local certo. Com o elemento central quando, devido ao elemento flutuador está fora do fluxo de documentos, de modo que o centro pode ocupar um todo contra a linha superior. E porque os elementos de flutuação sem se afastar do fluxo de texto, de modo que o elemento central elemento filho não pode aparecer nos seguintes elementos da esquerda, mas apareceu nos elementos esquerda. (Note-se que não apenas palavras, mesmo que o centro é carregado em um elemento de imagem não aparecerá nos seguintes elementos da esquerda, em suma, todos os sub-elementos não aparecerá nos seguintes elementos deixados)
2. O posicionamento absoluto
<!-- 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>
Uma vez que ambos os lados da largura elemento é fixo, então o elemento do meio não está posicionado, mas conjunto margin: 0 300px; haverá as seguintes circunstâncias, não está claro porque, se não é conhecer o trabalho de explicar, obrigado.
3. layouts flex-caixa
<!-- 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>
Largura fixa em ambos os lados do elemento de adaptação intermediário.
4. layout da tabela
<!-- 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>
O elemento artigo como uma mesa, e a largura da página largura é igual, proporcionando a exibição:-célula da tabela disposto o elemento esquerdo-direito para a célula, em que o elemento esquerdo largura 300 px, elemento direito largura 300 px, elemento centro largura não é largura conjunto adaptação largura.
6. layout de grade
<!-- 网格布局 -->
<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>
Por display: gridgrade de ajuste do elemento exibe artigo, por grid-template-columns: 300px auto 300px;definição três linhas de grade, a largura da grade é deixado 300 px, adaptativa grade intermédio direito largura 300px.
disposição 7. inline-block
inline-bloco também pode ser usado como uma disposição, mas não é adequado para um tal caso intermediário requer adaptativo, sob condições adequadas largura dada disposição.
código completo: alcançar o layout de três colunas do código-fonte cinco métodos
Os resultados:
Terminou, se inadequada lugar, por favor me corrijam.