Recibí esta pregunta exacta en un correo electrónico el otro día, y pensé que sería una buena publicación de blog debido a lo maravillosamente satisfactorio que es hacer esto en CSS en estos días. Además, podemos espolvorearlo sobre la marcha.
En cuanto a HTML, estoy pensando en imagen, texto, imagen, texto, etc.
<img src="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." alt="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." height="" width="" />
<p>Text text text...</p>
<img src="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." alt="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." height="" width="" />
<p>Text text text...</p>
<img src="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." alt="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/..." height="" width="" />
<p>Text text text...</p>Si ese fuera todo nuestro cuerpo en un documento HTML, la respuesta a la pregunta en el título de la publicación del blog es literalmente dos líneas de CSS:
body {
display: grid;
grid-template-columns: min-content 1fr;
}Se verá algo así …
No es bonito, pero hicimos el trabajo muy rápido.
Muy guay. Gracias CSS. Pero limpiemoslo. Asegurémonos de que haya un espacio, establezcamos el tipo predeterminado y reinemos en el diseño.
body {
display: grid;
padding: 2rem;
grid-template-columns: 300px 1fr;
gap: 1rem;
align-items: center;
max-width: 800px;
margin: 0 auto;
font: 500 100%/1.5 system-ui;
}
img {
max-width: 100%;
height: auto;
}
Quiero decir … enviarlo, ¿verdad? Cerca, pero tal vez podamos agregar un estilo móvil rápido.
@media (max-width: 650px) {
body {
display: block;
font-size: 80%;
}
p {
position: relative;
margin: -3rem 0 2rem 1rem;
padding: 1rem;
background: rgba(white, 0.8);
}
}
OK, AHORA envíalo!