Directorio de artículos
1. Diseño de dos columnas CSS (ancho fijo de la columna izquierda, ancho adaptable de la columna derecha)
efecto final:
Método 1: flotante + margen
HTML:
<div class="container">
<div class="left">定宽</div>
<div class="right">自适应</div>
</div>
CSS:
/* 不给高度不行，不给宽度可以自适应 */
.container {
height: 300px;
}
.left {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color:chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
background-color:coral;
margin-left: 200px;
}
Método 2: Posicionamiento + margen
HTML sin cambios
CSS:
/* 不给高度不行，不给宽度可以自适应 */
.container {
position: relative;
height: 300px;
}
.left {
position: absolute;
left: 0;
/* 定宽 */
width: 200px;
height: 100%;
background-color:chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
/* 方法一：margin-left: 200px(只设置边距也可以实现) */
/* 方法二：定位*/
position:absolute;
left: 200px;
right: 0; /*不设置这个，宽度会缩在一起，不自适应展开*/
background-color:coral;
}
Método 3: Flotante + BFC
HTML sin cambios
CSS:
.container {
height: 300px;
}
.left {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color: chartreuse;
}
.right {
/* 不设置宽度自适应 */
height: 100%;
overflow: hidden; /*触发BFC条件*/
background-color: coral;
}
Principio: agregue atributos BFC a elementos normales, los elementos normales no se bloquearán y se alinearán alrededor de elementos flotantes
✳ Un pequeño resumen: 脱离文档流的方式la idea general de lo anterior (como flotación, posicionamiento) es: primero deje que 左定宽元素los elementos salgan del flujo del documento, de modo que los elementos en la columna derecha normalmente se puedan separar del flujo del documento con el columna izquierda, y los elementos “站成一排”en la columna izquierda todavía están cubiertos con Los elementos en la columna derecha, y finalmente, nuestros 只需要调整一下右列元素márgenes, posicionamiento, etc. pueden completarse ~
Método 4: diseño flexible
HTML sin cambios
CSS:
.container {
display: flex;
height: 300px;
}
.left {
/* 定宽 */
width: 200px;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color: chartreuse;
}
.right {
/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */
flex: 1;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color:coral;
}
Método 5: diseño capaz
HTML sin cambios
CSS:
/* table布局：(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器； */
.container {
display: table;
height: 300px;
width: 100%;
}
.left {
display: table-cell;
/* 定宽 */
width: 200px;
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
background-color: chartreuse;
}
.right {
/*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
display: table-cell;
background-color: coral;
}
El diseño de la tabla solo necesita agregar el atributo display: table al elemento principal y el atributo display: table-cell a los dos elementos secundarios.
En segundo lugar, diseño de dos columnas CSS (la columna izquierda no tiene un ancho fijo, la columna derecha tiene un ancho adaptable)
方法一：flex
方法二：浮动+BFC
Debido a que el método de operación es el mismo que en la demostración anterior, solo se elimina el atributo de ancho de la columna izquierda, por lo que no los repetiré uno por uno.
Método de operación: elimine el ancho de la columna de la izquierda, y el ancho de la columna de la izquierda se adapta según el contenido, para lograr el efecto de "la columna de la izquierda no tiene un ancho fijo y la columna de la derecha tiene un ancho adaptable".
¿Por qué sólo estas dos formas se pueden lograr?
Debido a que otros métodos están fuera del flujo del documento (como: flotación, posicionamiento), los elementos internos no pueden admitir la caja que está fuera del flujo del documento.