html - 如何在标题元素下对齐内容元素？

Question

是否可以通过具有固定宽度的 CSS 实现以下对齐，所以当它们的标题和内容不在同一个 div 中时，这两行会在彼此下方？

<section>
  <div>
    <div>Header Text 1</div>
    <div>Header Text 2</div>
    <div>Header Text 3</div>
    <div>Header Text 4</div>
    <div>Header Text 5</div>
  </div>
  
  <div>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
  </div>
</section>

标签： htmlcss

Answer 1

事实上，你可以，为了更简化这个过程，你可以打破你的 html 代码的结构，然后使用Flexbox（不是必需的，但它很方便）相应地设置它们的样式。

html

  <section>
   <div id="first_row">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
   <div id="second_row">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
   <div id="third_column">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
</section>

CSS：

#first_row {
  width: 500px;
  background: orange;
  height: 90px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#first_row > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}
#second_row {
  width: 500px;
  background: red;
  height: 90px;
    display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#second_row > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}
#third_column {
  width: 200px;
  background: lightblue;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
#third_column > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}

https://jsfiddle.net/d8t01ypc