Felix Riesterer: zwei variabel breite Elemente zwingend nebeneinander

SELF-Forum

zwei variabel breite Elemente zwingend nebeneinander

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

Liebee Mitlesende,

gegeben sei folgende Struktur:

<section>
    <h1>...</h1>
    <p>...</p>
</section>

Das Layout soll die Überschrift als linke Box, den Textabsatz als rechte positionieren. Bisheriger Erkentnisstand: jsFiddle

Mit meinem bisherigen Wissen erreiche ich das Gewünschte nur, indem ich beiden Boxen eine feste (oder maximalbeschränkte) Breite gebe. Sonst wird umgebrochen und eine Box hängt tiefer.

Das zweite Beispiel im Fiddle zeigt, dass bei einer schmaleren linken Box wegen des nun verfügbaren Platzes die rechte Box trotzdem nicht breiter wird - was angesichts von max-width ja auch völlig logisch ist. Ist das gewünschte Verhalten (linke Box wird bei verfügbarem Platz breiter) trotzdem irgendwie möglich?

Liebe Grüße,

Felix Riesterer.

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. zwei variabel breite Elemente zwingend nebeneinander

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    Hallo

    Ich verstehe leider nicht was du genau erreichen möchtest.

    Zwei Container nebeneinander auf gleicher Höhe hört sich nach dem Einsatz von Flexbox an.

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 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

      1. Hurra!!! DAS ist es!

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber MrMurphy1,

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

        genau so wollte ich das haben! Herzlichen Dank für Deinen Lösungsvorschlag!

        Liebe Grüße,

        Felix Riesterer.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. zwei variabel breite Elemente zwingend nebeneinander

        Gunnar Bittersmann Homepage des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        @@MrMurphy1

        Ich sehe zur Zeit mit den vorliegenden Informationen folgende Lösung:
        [viel Code]

        Dem Lesenden zuzmuten, im Code das Unsinnige, das Irrelevante und das zur Frage Gehörende voneinander zu trennen, sehe ich nicht als Lösung an. Felix mag das zuzumuten sein; der Allgemeinheit der Fragenden nicht.

        Und zeitweilig zum direkten anschauen und ausprobieren:

        In ein Antwortposting gleich eine Selbstzerstörungssequenz einzubauen, ist anbetracht des hiesigen Archivs auch nicht zielführend.

        Beides habe ich desöfteren erwähnt. Wäre schön, wenn du dir das mal durch den Kopf gehen lassen würdest – was nicht heißt: zum einen Ohr rein, zum anderen raus.

        LLAP 🖖

        --
        “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. zwei variabel breite Elemente zwingend nebeneinander

    Matthias Scharwies
    +2 Informationen zu den Bewertungsregeln

    Servus!

    Das Layout soll die Überschrift als linke Box, den Textabsatz als rechte positionieren. Bisheriger Erkentnisstand: jsFiddle

    Mit meinem bisherigen Wissen erreiche ich das Gewünschte nur, indem ich beiden Boxen eine feste (oder maximalbeschränkte) Breite gebe. Sonst wird umgebrochen und eine Box hängt tiefer.

    Versuch mal die shorthand-flex-Eigenschaft.

    Setzt flex-grow jeweils auf 1 und verändere die Werte von flex-shrink und besonders flex-basis. (das ist jetzt aber alles ungetestet!)

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. zwei variabel breite Elemente zwingend nebeneinander

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber Matthias,

      Bisheriger Erkentnisstand: jsFiddle

      Versuch mal die shorthand-flex-Eigenschaft.

      tja, mit flex habe ich noch absolut null Erfahrung. Ganz offensichtlich ist jetzt der richtige Zeitpunkt genau dieses zu ändern. Vielen Dank für die Idee, flex als Lösungsweg zu versuchen.

      Liebe Grüße,

      Felix Riesterer.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. zwei variabel breite Elemente zwingend nebeneinander

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Felix Riesterer

    Mit meinem bisherigen Wissen erreiche ich das Gewünschte

    Was da wäre? Unser bisheriges Wissen darüber ist fast null.

    Die Boxen sollen nebeneinander sein, gut. Aber wie soll der zur Verfügung stehende Platz unter ihnen aufgeteilt werden?

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. zwei variabel breite Elemente zwingend nebeneinander

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber Gunnar,

      Mit meinem bisherigen Wissen erreiche ich das Gewünschte

      Was da wäre? Unser bisheriges Wissen darüber ist fast null.

      Du darfst jsfiddle meiden und damit mein Fiddle ignorieren. Aber dort hättest Du live und in Farbe sehen können, was mein bisheriges Wissen ausmacht.

      Liebe Grüße,

      Felix Riesterer.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. zwei variabel breite Elemente zwingend nebeneinander

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Felix Riesterer

        Mit meinem bisherigen Wissen erreiche ich das Gewünschte

        Was da wäre? Unser bisheriges Wissen darüber ist fast null.

        Du darfst jsfiddle meiden und damit mein Fiddle ignorieren. Aber dort hättest Du live und in Farbe sehen können, was mein bisheriges Wissen ausmacht.

        Das habe ich mir nicht entgehen lassen. Die Frage war aber nicht nach deinem Wissen, sondern nach unserem. Nochmal für dich übersetzt: deine Problembeschreibung war unzureichend – wie von mehreren angemerkt wurde.

        LLAP 🖖

        PS: Du hattest meine Rückfrage „Was da wäre?“ auf „Mit meinem bisherigen Wissen“ bezogen? Nein, es war auf „das Gewünschte“ bezogen.

        --
        “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. zwei variabel breite Elemente zwingend nebeneinander

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Felix Riesterer,

        Du darfst jsfiddle meiden und damit mein Fiddle ignorieren.

        Oh. Ich hab den Link auch beim ersten Mal übersehen.

        Bis demnächst
        Matthias

        --
        Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln