diseño de dos columnas
-
Descripción: un ancho de columna fija de un adaptativa columna. Los beneficios como este hacer es fijar el ancho de columna puede anunciar, la adaptación puede ser utilizado como el contenido principal.
-
Implementación: ① margen flotador + ② utilizando la posición absoluta de
例： float+margin
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
diseño de tres columnas
-
Características: fijo anchura en ambos lados, entonces el centro de la anchura es automático, el contenido puede ser adaptativo, el margen más el margen, a conjunto
-
implementación:
-
Utilizar las columnas izquierda y derecha utilizando la propiedad float, la columna central mediante la distracción atributo margen
-
Posicionamiento consigue utilizando la posición, es decir, izquierda y derecha dos columnas utilizando la posición para el posicionamiento, la columna intermedia utilizada para el posicionamiento de margen
-
例: float+margin
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
.left{
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.right{
width: 150px;
height: 300px;
background: green;
float: right;
}
.middle{
height: 300px;
background: red;
margin-left: 220px;
margin-right: 160px;
}
例：position +magin
<body>
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
diseño elástico
- Descripción: Caja elástico (FlexBox) diseño es un diseño como un método diseñado para unidimensional. el contenido de una dimensión que desea estar en filas o columnas de diseño. Puede utilizar la pantalla: flex para convertirse en el diseño elemento elástico
例：
.container {
display: flex;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
注：该容器的直接子元素会变为弹性项（flex item），并按行排列
