指定区块右侧和下方的相关区块

Question

我正试图找到仅使用CSS实现这种结构的最佳（或好）方法：

基本上，“标题”块的高度取决于“徽标”块中图像的大小，此块应从“徽标”块正确显示在右侧。这同样适用于“菜单”块，它应位于“徽标”块的正下方并具有相同的宽度。

我试图以“硬编码”的方式实现它，只是为了让你明白我的意思：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;
}

我面临的问题是，只有当它们具有相同的父级时，这些块才能相互依赖，在这种情况下它很难实现，因为这样我只能修复一个参数（高度/宽度）。

这样做的方法是什么？

P.S：我知道我可以用“桌子”风格来做，但这是每个人在我读到的关于这个主题的每篇文章中都要避免的。

Answer 1

CSS表将是这里的方式......不是ACTUAL表，而是表格布局。

.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表格布局对于非表格数据是完全可以接受的但我不认为这是 完美的 解决方案。如果菜单比图像宽，那么它的宽度优先，但是根据当前的布局方法，它可能是最佳的。

CSS网格，如果得到适当支持，可能是理想的解决方案。