MrMurphy1: zwei variabel breite Elemente zwingend nebeneinander

Beitrag lesen

SELF-Forum

zwei variabel breite Elemente zwingend nebeneinander

MrMurphy1 (Versionen)
+2 Informationen zu den Bewertungsregeln

Hallo

Ich sehe zur Zeit mit den vorliegenden Informationen folgende Lösung:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      *, *::before, *::after {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
   }

   /*Spezielle Einstellungen vom Original*/
   @media all {
      body {
         background: #666;
      }
      section {
         margin: 0 0 1rem 0;
      }
      section h1 {
         background: white;
         /*text-align: right;*/
         /*display: inline-block;*/
         /*vertical-align: middle;*/
         box-shadow: 0 0 2rem white;
         /*max-width: calc(50% - 0.5rem - 1rem);*/
         /*width: auto;*/
         padding: 0.5rem;
         border: 1px solid red;
         margin-right: 0.5rem;
      }
      section p {
         background: white;
         position: relative;
         /*display: inline-block;*/
         /*vertical-align: middle;*/
         box-shadow: 0 0 2rem white;
         /*max-width: calc(50% - 0.5rem - 3rem);*/
         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;
      }
   }

   /*Flexbox*/
   @media all {
      section {
         max-width: 850px;
         padding: 1rem;
         display: flex;
         align-items: center;
      }
      section p {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }

   </style>
</head>
<body>
   <main role="main">
      <section>
         <h1>Überschrift</h1>
         <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. Aber wo bleibt die Überschrift?</p>
      </section>
      <section>
         <h1>kurz</h1>
         <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>

Und zeitweilig zum direkten anschauen und ausprobieren:

http://boratb.bplaced.net/index07.html

Gruss

MrMurphy

Beitrag melden
+2
Informationen zu den Bewertungsregeln