Teniendo en cuenta una altura que se conoce, por favor escriba diseño de tres columnas, en la columna izquierda, el ancho de cada columna de la derecha de 300 píxeles, la adaptación intermedia.
Esa caja intermedia adaptativa intermedio se puede ajustar automáticamente como el tamaño o el tamaño de los sub-elementos en el tamaño de la ventana del navegador, la caja intermedia se puede fijar la anchura, que es el tamaño de una distracción elemento hijo.
Para lograr el tema requerido en los próximos cinco maneras.
1. Disposición de flotación
<!-- 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
Aquí hay que enfatizar el punto .left, y .rightel orden de los elementos no se puede revertir si la reversión de los siguientes resultados aparecen.
Esto se debe a que los elementos adecuados que flotan a tratar de invocar el derecho, pero ahora debido al elemento central ocuparán toda la línea anterior, por lo que no puede depender de arriba, así que trate de confiar en el centro a los siguientes elementos luego la derecha tanto como sea posible, indicando de esta manera la posición mostrada en la figura.
Si los elementos adecuados en la parte superior central del elemento, esta vez no hay un centro tanto como sea posible contra los elementos de la derecha se mostrarán en la parte superior y en la ubicación correcta. Con el elemento central cuando, debido al elemento flotante está fuera del flujo de documentos, por lo que el centro puede ocupar su conjunto en contra de la línea superior. Y debido a que los elementos de flotación, sin apartarse del flujo de texto, por lo que el centro de elemento de elemento secundario no puede aparecer en los siguientes elementos de la izquierda, pero aparecido en los elementos que quedan por jugarse. (Tenga en cuenta que no sólo palabras, incluso si el centro se carga en un elemento de la imagen no aparece en los siguientes elementos de la izquierda, en fin, todos los sub-elementos no aparecerán en los siguientes elementos de la izquierda)
2. El posicionamiento 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>
Desde ambos lados de la anchura del elemento es fijo, por lo que el elemento medio no está colocado pero parámetro margin: 0 300px; habrá las siguientes circunstancias, no está claro por qué, si hay que saber la molestia de explicar, gracias.
3. Los diseños de flex-box
<!-- 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>
Ancho fijo en ambos lados de la adaptativo elemento intermedio.
4. diseño de la mesa
<!-- 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>
El elemento artículo como una mesa, y el ancho de la página anchura es igual, proporcionando la pantalla: table-cell dispuesto el elemento de izquierda-derecha para la célula, en el que el elemento de izquierda anchura 300 px, elemento derecho anchura 300 px, elemento central anchura no es ancho establecido adaptación anchura.
6. diseño de cuadrícula
<!-- 网格布局 -->
<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: gridrejilla ajuste elemento displays artículo, por grid-template-columns: 300px auto 300px;el establecimiento de tres línea de rejilla, el ancho de rejilla se deja 300 px, adaptativo rejilla intermedia derecha anchura 300px.
7. Disposición inline-block
inline-block también puede ser utilizado como un diseño, pero no es adecuado para un caso tan intermedio requiere adaptativa, en condiciones adecuadas dadas ancho de la disposición.
código completo: conseguir diseño de tres columnas del código fuente cinco métodos
Los resultados:
Terminado, si lugar inadecuado, por favor, corríjanme.