Directorio de artículos
1. Tema
Dé su respuesta basada en la pregunta.
(La altura de las columnas superior e inferior es fija, y la del medio es adaptable)
Tema: Suponiendo que se conoce el ancho, escriba un diseño de tres columnas, donde la altura de las columnas superior e inferior es de 150 px y la del medio es adaptado.
En segundo lugar, los detalles de mi código
https://codepen.io/janmie-cjm/pen/vYGReEv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>页面布局-三栏布局2</title>
<style>
html *{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
background-color: #ffffee;
}
article {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 假设宽度已知，请写出三栏布局，其中上栏、下栏高度各位150px，中间自适应。 -->
<!-- 1-绝对定位 -->
<section>
<style>
.wrapper1 {
width: 100px;
}
.top1,.bottom1 {
background-color: #cff;
height: 50px;
display: absolute;
}
.top1 {
top: 0;
}
.bottom {
bottom: 0;
}
.center1 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper1">
<div class="top1">我是top</div>
<div class="center1">
<h6>1-绝对定位</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom1">我是bottom</div>
</div>
</article>
</section>
<!-- 2-flexbox -->
<section>
<style>
.wrapper2 {
width: 100px;
display: flex;
flex-direction: column;
}
.center2 {
background-color: #fcc;
flex: 1;
}
.top2,.bottom2 {
height: 50px;
background-color: #cff;
}
</style>
<article>
<div class="wrapper2">
<div class="top2">我是top</div>
<div class="center2">
<h6>2-flexbox</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom2">我是bottom</div>
</div>
</article>
</section>
<!-- 3-table -->
<section>
<style>
.wrapper3 {
display: table;
}
.wrapper3 div {
display: table-columns;
width: 100px;
}
.top3,.bottom3 {
background-color: #cff;
height: 50px;
}
.center3 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper3">
<div class="top3">我是top</div>
<div class="center3">
<h6>3-table</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom3">我是bottom</div>
</div>
</article>
</section>
<!-- 4-grid -->
<section>
<style>
.wrapper4 {
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 100px;
}
.top4,.bottom4 {
background-color: #cff;
}
.center4 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper4">
<div class="top4">我是top</div>
<div class="center4">
<h6>4-grid</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom4">我是bottom</div>
</div>
</article>
</section>
</body>
</html>
Tres, resumen
- ¿Cuáles son las soluciones a este problema?
Posicionamiento absoluto / flexbox / diseño de tabla / diseño de cuadrícula; el diseño de
tres columnas superior, medio e inferior no necesita aplicar el método de diseño anterior, siempre que cada parte del contenido esté en su propio elemento a nivel de bloque, el contenido se distribuirá automáticamente de arriba a abajo.
- "Html * {...}" en el código se puede aplicar globalmente; en la
solución de diseño de tabla , la capa externa debe usar display: table; los subelementos internos deben usar display: table-column; - en la
solución de diseño de cuadrícula, el código Aplicarlo directamente a la envoltura externa, mostrar: cuadrícula; cuadrícula-plantilla-filas para agregar múltiples filas y cuadrícula-plantilla-columnas para agregar múltiples columnas.
* Todavía hay muchas deficiencias en el código. Esperamos expresar diferentes opiniones y comunicarnos entre nosotros. *