Beispiel:CSS-Anw-variable-elemente-nebeneinander.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>zwei variabel breite Elemente zwingend nebeneinander</title>
   <style>
  /* für schmale Viewports bis 20em */
    section {
       padding: 1rem;
       display: flex;
       flex-direction: column;
    }
 

   /*Flexbox für Viewpots ab 20em Breite */
   @media (min-width: 20em) {
      section {
         display: flex;
         align-items: center;
         flex-direction: row;
      }
      section p {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }

   /*farbliche Kennzeichnung der Elemente*/
   @media all {
      section h2 {
         background: white;
         box-shadow: 0 0 2rem pink;
         padding: 0.5rem;
         border: 1px solid red;
         margin-right: 0.5rem;
      }
      section p {
         background: white;
         position: relative;
         box-shadow: 0 0 2rem pink;
         padding: 0.5rem 1rem;
         border: 1px solid red;
         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;
      }
   }
  </style>
</head>
<body>
   <h1>zwei variabel breite Elemente zwingend nebeneinander</h1>
   <main>
      <p>Verändern Sie den Viewport und beobachten Sie, wie der Textabsatz automatisch umbricht.</p>
      <section>
         <h2>Überschrift</h2>
         <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. Aber wo bleibt die Überschrift?</p>
      </section>
      <section>
         <h2>kurz</h2>
         <p>Auch dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird auch er umbrechen. 
            Aber wo bleibt dieses mal die Überschrift?</p>
      </section>
   </main>


</body></html>