HTML5和CSS中的小问题

Question

我有一个小问题与框周围的一些文本区域我的网站。如果你看我的图片（右框），右边框不够长，下边框和左边框不在同一高度……但我愿意！

以下是HTML：

null

.bloc50 {
  float: left;
  width: 50%;
  border: 1px solid rgb(231, 7, 7);
  padding: 10px;
  box-sizing: border-box;
}

<div class="bloc50">
  <h3>Détails:</h3>
  <h4>Date naissance:</h4>
  <p>6 mai 19</p>
  <h4>Lieu naissance:</h4>
  <p>Grand Mère</p>
  <h4>Date décès:</h4>
  <p>N/A</p>
  <h4>Lieu décès:</h4>
  <p>N/A</p>
</div>
<div class="bloc50">
  <h3>Frères & soeurs:</h3>
  <p><a href="pierrel.html">Pierre Lefebvre</a></p>
  <p><a href="patrickl.html">Patrick Lefebvre</a></p>
</div>

null

我试着把一个div放在那2个div之前，但不喜欢结果。

Answer 1

如果要将所有这些.bloc50div元素放置在父容器中（我在这里使用了div)&应用一些基本的FlexBox样式

null

.wrapper{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:100%;
  height:100vh;
  border:1px solid black
  
  justify-content:flex-start;
  align-content:flex-start;
}

.wrapper .bloc50{
  width:50%;
  border: 1px solid rgb(231, 7, 7);
  padding: 10px;
  box-sizing: border-box;
}

<div class='wrapper'>
  <div class="bloc50">
    <h3>Détails:</h3>
    <h4>Date naissance:</h4>
    <p>6 mai 19</p>
    <h4>Lieu naissance:</h4>
    <p>Grand Mère</p>
    <h4>Date décès:</h4>
    <p>N/A</p>
    <h4>Lieu décès:</h4>
    <p>N/A</p>
  </div>
  <div class="bloc50">
    <h3>Frères & soeurs:</h3>
    <p><a href="pierrel.html">Pierre Lefebvre</a></p> 
    <p><a href="patrickl.html">Patrick Lefebvre</a></p> 
  </div>

  <div class="bloc50">
    <h3>Détails:</h3>
    <h4>Date naissance:</h4>
    <p>6 mai 19</p>
    <h4>Lieu naissance:</h4>
    <p>Grand Mère</p>
    <h4>Date décès:</h4>
    <p>N/A</p>
    <h4>Lieu décès:</h4>
    <p>N/A</p>
  </div>
  <div class="bloc50">
    <h3>Frères & soeurs:</h3>
    <p><a href="pierrel.html">Pierre Lefebvre</a></p> 
    <p><a href="patrickl.html">Patrick Lefebvre</a></p> 
  </div>
</div>