Diese exakte Frage erhielt ich neulich per E-Mail, und ich dachte, sie würde sich gut für einen Blogbeitrag eignen, da es heutzutage wunderbar befriedigend ist, dies in CSS zu tun. Außerdem können wir dabei nach und nach Verfeinerungen hinzufügen.
Was das HTML angeht, denke ich an Bild, Text, Bild, Text usw.
<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>
<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>
<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>Wenn das unser gesamter Körper in einem HTML-Dokument wäre, **lautet die Antwort auf die Frage im Titel des Blogbeitrags buchstäblich zwei Zeilen CSS**
body {
display: grid;
grid-template-columns: min-content 1fr;
}Es wird ungefähr so aussehen...
So cool. Danke, CSS. Aber lassen Sie uns das aufräumen. Stellen wir sicher, dass ein Abstand vorhanden ist, legen wir den Standardtyp fest und zügeln wir das Layout.
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;
}
Ich meine... liefern, richtig? Knapp daneben, aber vielleicht fügen wir nur schnell einen mobilen Stil hinzu.
@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, JETZT liefern!
Äh... vielleicht `figure` und `figcaption` verwenden? Damit der Text mit dem Bild in Beziehung gesetzt werden kann?
Wenn der Text mit den einzelnen Bildern verbunden ist, wäre das nicht ein guter Anwendungsfall für `figure` und `figcaption`?
Etwas in dieser Richtung
Aber dann muss das Grid-Layout neu definiert werden
Ja, vielleicht. Wenn der Text buchstäblich eine Bildunterschrift für das Bild ist, sicher. Ich würde nicht sagen, dass es immer so sein muss (wenn man an eine Liste von Funktionen denkt, bei der das Bild nur ein beliebiges Symbol oder ein Screenshot oder so etwas ist und der Text eigentlich keine Bildunterschrift dazu ist).
Sobald Sie einen solchen Wrapper "im Weg" haben, wird dies zu einem überzeugenden Grund dafür, dass es Subgrid gibt!
Sie können auch `box-shadow: 20px 15px green;` hinzufügen
um einem Bild einen Schatten hinzuzufügen. Nur wenn es gut aussieht.
Haben Sie jemals darüber nachgedacht, dass wir, wenn wir einen negativen Margin auf die Elemente anwenden, die unter den ersetzten Elementen (z. B. `<img>`) liegen, wie in diesem speziellen Beispiel, einen neuen Stapelkontext für das Element erstellen müssen, auf das wir einen negativen Margin anwenden? Andernfalls befindet sich der Hintergrund des `
` unterhalb des `<img>-Tags.
Wie in diesem Fall müssen wir `position: relative;` (oder es kann `opacity: 0.99;` usw. sein...) zum `
` hinzufügen, auch wenn es im DOM unter dem Bild liegt.
Auf der anderen Seite, wenn wir das `<img>` z.B. in `
Ich dachte, der Zweck der mobilen Stile (in diesem Fall) sei es, einen Stapel-Effekt zwischen dem Bild und dem entsprechenden Absatz zu erzeugen? Sollte also in diesem Fall ein neuer Stapelkontext vernünftig sein?
Danke Chris,
Das ist genau das, wonach ich gesucht habe. Ich erstelle normalerweise Seiten, die Rucksacktouren in der Sierra Nevada beschreiben, mit vielen Bildern (einige davon kann ich anklicken, um sie zu vergrößern) und mit jedem Bild liefere ich ein oder zwei Absätze Text. Ihr schönes klares Beispiel ist also genau richtig!
Hallo Chris – Ich habe diesen Thread gefunden, weil ich nach einer Möglichkeit gesucht habe, Textblöcke mit bestimmten Merkmalen eines Bildes zu verknüpfen. Schwer zu erklären, aber ich sah den Effekt in einem NY Times-Artikel und fragte mich, wie einfach/schwierig es wäre, ihn zu erreichen. Ist das etwas, das ich programmieren müsste, oder gibt es vielleicht schon eine Lösung? Hier ist der Link, falls Sie Ideen haben, und danke! https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html
Wie würden Sie das machen, wenn Sie das gleiche Design hätten, aber auch eine Überschrift über dem Absatz wünschen würden?
<img src="..." alt="..." height="" width="" /><h1>Überschriftentext!</h1>
<p>Text Text Text...</p>
Ich würde versuchen, die Überschrift und den Absatz zusammen in einen Wrapper zu packen und dann die vorhandenen Absatzstile auf den Wrapper anzuwenden.
Ich habe es auf meinem Blog angewendet und es funktioniert. Der Hintergrund funktioniert jedoch nicht. Ich musste den Rand von -3 auf 0rem anpassen und den Text begründen. Ich habe versucht, meine Zitate in verschiedenen Formen darzustellen, um meinen Blogbesuchern entgegenzukommen, aber ich denke, die Anwendung dieser Grid-Form ist eine gute Idee. Ich hatte nur Schwierigkeiten, weil in Blogger, sobald Sie den Body taggen, die CSS den gesamten Blog betreffen würden. Ich musste eine Klasse und ID verwenden, um den Code zu beeinflussen. Vielen Dank für das Teilen.