Dependent Blöcke nach rechts und unter dem angegebenen Block

Question

Ich versuche, die beste (oder gut) Weg zu finden, eine solche Struktur nur mit CSS zu implementieren:

Grundsätzlich die Höhe Der "title" -Block hängt von der Größe des Bildes im "logo" -Block ab und dieser Block sollte genau rechts vom "logo" -Block dargestellt werden. Gleiches gilt für den Block "menu", der sich genau unter dem Block "logo" befinden soll und die gleiche Breite haben soll.

Ich habe versucht, es in "hard" Stil zu implementieren, nur für Sie, um zu sehen, was ich meine: https://jsfiddle.net/DmitryGinzburg/kt7g1esu/

HTML:

<div id="top"> 
    <div id="logo"> 
    <img src="http://placekitten.com/200/100"/> 
    </div> 
    <div id="account"> 
    Hello, abacabaUser 
    </div> 
</div> 
<div id="bottom"> 
    <div id="menu"> 
    <ul class="nav_bar"> 
     <li>Anchor1</li> 
     <li>Anchor2</li> 
     <li>Anchor3</li> 
    </ul> 
    </div> 
    <div id="content"> 
    Duis laoreet hendrerit aliquam. Ut cursus pellentesque ex in vehicula. Integer aliquet velit sed neque ultrices, id condimentum nibh accumsan. Sed maximus molestie nulla, et viverra eros sollicitudin id. Sed in dapibus mi, eget faucibus urna. Ut nulla lacus, cursus in lorem ut, rhoncus tempus velit. Vivamus lobortis egestas finibus. Proin eget mauris ut nisi euismod aliquam quis nec odio. Nulla ac turpis ac urna euismod porttitor. Proin lacus lectus, bibendum in mauris ac, sollicitudin laoreet mi. Quisque posuere lobortis imperdiet. Etiam id quam eu mauris congue faucibus sit amet non libero. Sed et massa in lacus posuere imperdiet vitae in lacus. Nulla mauris nisl, venenatis eu gravida sit amet, ultricies eu tellus. 
    </div> 
</div> 

CSS:

div {position: absolute;} 

.nav_bar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

#account {left: 500px;} 

#menu {top: 100px;} 

#content { 
    top: 100px; 
    left: 200px; 
    width: 400px; 
} 

Die Das Problem, dem ich gegenüberstehe, ist, dass die Blöcke nur dann voneinander abhängen können, wenn sie das gleiche Elternteil haben, und in diesem Fall ist es kaum implementierbar, weil ich auf diese Weise nur einen Parameter (heig ht/Breite).

Was ist der vermeintliche Weg, es zu tun?

P.S: Ich weiß, ich kann es mit "Tisch" Stil, aber das ist, was jeder versucht zu vermeiden in jedem Artikel, den ich über dieses Thema gelesen habe.

Answer 1

CSS Tabellen wäre der Weg, hier zu gehen ... nicht ACTUAL Tabellen, sondern Tabellen-Layout.

.nav_bar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#logo, 
 
#menu, 
 
#account, 
 
#content { 
 
    display: table-cell; 
 
} 
 
#account { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
#top, 
 
#bottom { 
 
    display: table-row; 
 
}

<div id="top"> 
 
    <div id="logo"> 
 
    <img src="http://placekitten.com/200/100" /> 
 
    </div> 
 
    <div id="account"> 
 
    Hello, abacabaUser 
 
    </div> 
 
</div> 
 
<div id="bottom"> 
 
    <div id="menu"> 
 
    <ul class="nav_bar"> 
 
     <li>Anchor1</li> 
 
     <li>Anchor2</li> 
 
     <li>Anchor3</li> 
 
    </ul> 
 
    </div> 
 
    <div id="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor turpis orci, a sodales arcu laoreet sit amet. Vestibulum nibh enim, iaculis sed risus in, egestas auctor mi. Ut a aliquam mauris, vel posuere est. Fusce a nisi vitae urna convallis 
 
    porta. Suspendisse sed tristique augue. Proin at mollis quam. Aliquam odio elit, auctor sed tortor sed, malesuada dignissim nulla. Ut ultrices neque urna, eu accumsan turpis viverra id. Nunc rhoncus ex eget urna facilisis tempor. Nullam id pretium 
 
    elit. Vestibulum libero lorem, semper sed ex sed, interdum dignissim tortor. Aliquam sollicitudin neque diam, non pharetra est hendrerit a. Vivamus hendrerit venenatis orci et scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia 
 
    nostra, per inceptos himenaeos. Integer commodo risus libero, nec elementum orci hendrerit sed. Nunc eleifend sapien ac vehicula porttitor. Vivamus laoreet purus lectus, faucibus pretium erat fringilla ut. Etiam accumsan justo at metus porttitor condimentum. 
 
    Quisque vel lorem a lacus volutpat ornare vitae quis turpis. Suspendisse potenti. Nam cursus odio sed ipsum semper, sed interdum mi sollicitudin. Suspendisse rutrum justo at eleifend vestibulum. Maecenas ut urna nibh. Mauris eget turpis metus. Aenean 
 
    lobortis fermentum augue, vitae interdum justo ullamcorper nec. Donec viverra, nisl scelerisque iaculis suscipit, lectus odio fringilla massa, nec tincidunt neque velit vitae mi. Proin pharetra fringilla ligula. Class aptent taciti sociosqu ad litora 
 
    torquent per conubia nostra, per inceptos himenaeos. Aliquam porta leo in dolor commodo, faucibus pretium elit fringilla. In eleifend lorem quis enim feugiat, id fringilla ipsum malesuada. Morbi non feugiat urna, ullamcorper tincidunt nibh. Nam lacinia, 
 
    velit sed ultrices faucibus, erat tortor tincidunt tellus, cursus imperdiet turpis ante eu arcu. Integer sed facilisis libero, vitae mattis nisl. Proin cursus, sem at tempor convallis, ligula ligula egestas erat, eget molestie justo elit vitae dui. 
 
    Praesent leo velit, luctus vitae suscipit id, placerat a velit. Proin posuere enim vel lobortis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur bibendum dui quis velit ornare rhoncus. 
 
    Phasellus blandit vulputate ligula, at molestie ligula consequat sit amet. Mauris faucibus luctus mauris, in gravida nulla facilisis pellentesque. Nunc vitae odio rutrum odio hendrerit mattis eu eu tellus. Vivamus tincidunt, nulla et varius mollis, 
 
    dolor ligula viverra nibh, sed porttitor urna nisl nec quam. Duis laoreet hendrerit aliquam. Ut cursus pellentesque ex in vehicula. Integer aliquet velit sed neque ultrices, id condimentum nibh accumsan. Sed maximus molestie nulla, et viverra eros 
 
    sollicitudin id. Sed in dapibus mi, eget faucibus urna. Ut nulla lacus, cursus in lorem ut, rhoncus tempus velit. Vivamus lobortis egestas finibus. Proin eget mauris ut nisi euismod aliquam quis nec odio. Nulla ac turpis ac urna euismod porttitor. 
 
    Proin lacus lectus, bibendum in mauris ac, sollicitudin laoreet mi. Quisque posuere lobortis imperdiet. Etiam id quam eu mauris congue faucibus sit amet non libero. Sed et massa in lacus posuere imperdiet vitae in lacus. Nulla mauris nisl, venenatis 
 
    eu gravida sit amet, ultricies eu tellus. 
 
    </div> 
 
</div>

CSS Tabellenlayout ist durchaus akzeptabel für nicht-tabellarische Daten, aber ich glaube nicht, dass dies eine perfekte Lösung. Wenn das Menü breiter als das Bild wäre, würde seine Breite Vorrang haben, aber angesichts der aktuellen Layout-Methoden ist es wahrscheinlich die optimale.

CSS-Grids können, wenn sie ordnungsgemäß unterstützt werden, die ideale Lösung sein.