我有一个小问题与框周围的一些文本区域我的网站。如果你看我的图片(右框),右边框不够长,下边框和左边框不在同一高度……但我愿意!
以下是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之前,但不喜欢结果。
如果要将所有这些.bloc50
div元素放置在父容器中(我在这里使用了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>