Beispiel:CSS-mehrspaltige Layouts-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>zwei variabel breite Elemente zwingend nebeneinander</title>
  <style>

  /* Grid für breitere Viewports */

@media (min-width: 20em) { section { display: grid; grid-template-columns: min-content 1fr; gap: 2em; margin: 1em; } } 

  /*farbliche Kennzeichnung der Elemente*/

section> * { background: white; box-shadow: 0 0 2rem pink; padding: 1rem; border: thin solid red;

} section p { position: relative; margin: 0 0 0 2rem; } section p::before { content: ""; position: absolute; left: -2rem; top: calc(50% - 0.5rem); width: 0; border-color: transparent red; border-style: solid; border-width: 0.5rem 2rem 0.5rem 0; }

div { max-width: 50em; overflow: auto; 

 padding: 1em;
 resize: both;

border: thin dotted; }

</style> </head> <body>

zwei variabel breite Elemente zwingend nebeneinander

Verändere den Viewport und beobachte, wie der Textabsatz automatisch umbricht.

<section>

Überschrift

Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. Aber wo bleibt die Überschrift?

</section> <section>

kurz

Auch dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird auch er umbrechen. Aber wo bleibt dieses mal die Überschrift?

</section>

</body></html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mehrspaltige_Layouts-6.html&oldid=99654“