1. Pantalla de uso: en línea;
- Podemos usar display: inline para convertir un elemento en un elemento en línea, pero su largo y ancho son el largo y ancho de su contenido. Establecer el atributo no funciona.
<style>
/* 方法一*/
.box1,
.box2 {
display: inline;
width: 200px;
height: 2000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>
</body>
2. Use display: inlien-block
Use display: inline-block; puede colocar elementos en una línea para mostrarlos, pero se verán afectados por la tecla de espacio / avance de línea y tendrán un espaciado predeterminado.
Solución:
- Puede agregar tamaño de fuente al elemento principal con display: inline-block, pero el contenido del elemento secundario predeterminado desaparecerá. En este momento, agregue tamaño de fuente al elemento secundario para sobrescribir el tamaño de fuente del elemento principal .
- 2. Elimine el impacto de los espacios y los saltos de línea, pero esto puede afectar la legibilidad del código, no está estandarizado y no se recomienda su uso.
<style>
/* 方法二 display: inline-block;*/
* {
padding: 0px;
margin: 0px;
}
.box {
font-size: 0px;
}
.box1,
.box2 {
display: inline-block;
width: 200px;
height: 200px;
font-size: 24px;
text-align: center;
background-color: pink;
}
.box2 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>
</body>
3. Use float float: left / right, pero recuerde que la forma más fácil de borrar float es agregar overflow: hidden al elemento padre.
Nota:
- No hay espacio en el flotador flotante.
- Si usa la pantalla flotante: inline-block, no tendrá ningún efecto
<style>
/* 方法二 浮动float*/
* {
padding: 0px;
margin: 0px;
}
.box {
overflow: hidden;
/* 清除浮动 */
}
.box1,
.box2 {
float: left;
width: 200px;
height: 200px;
text-align: center;
background-color: pink;
}
.box2 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>
</body>
