子コンテナが内部に浮いている親コンテナがあります。すべての子には、境界線のあるコンテンツセクションがあります。コンテンツセクションの高さは、その中のコンテンツによって異なります。要件は、同じ高さのコンテンツセクションを持つことです。サンプルコードのように、container1とcontainer2は同じ高さである必要があります。つまり、すべてのコンテナの高さは、最も長いコンテナの高さで設定する必要があります。
.clearfix{
display: flex;
}
.box {
float: left;
width: 43%;
padding: 10px;
}
.clearfix::after {
content: "";
clear: both;
}
.margin-left{margin-left:10px}
.margin-right{margin-right:10px}
.border{border: 1px solid red}<div class="clearfix">
<div class="box margin-right" style="background-color:#bbb">
<h1>
Header1
</h1>
<div class="border">
<h3>
Container1
</h3>
Some text inside the box.
Some text inside the box.
Some text inside the box.
</div>
</div>
<div class="box margin-left" style="background-color:#ccc">
<h1>
Header2
</h1>
<div class="border">
<h3>
Container2
</h3>
Some text inside the box.
</div>
</div>
</div>フレックスボックスを使用しているので、ほぼ問題ありません。各コンテナ内で同じことflex-grow:1を行い、コンテナがすべてのスペースを埋めるようにすることを検討してください。このソリューションは、両方のタイトルの高さが同じであるという事実を考慮しています。
.clearfix {
display: flex;
}
.box {
width: 43%;
padding: 10px;
display: flex;
flex-direction: column;
}
.margin-left {
margin-left: 10px
}
.margin-right {
margin-right: 10px
}
.border {
border: 1px solid red;
flex-grow: 1;
}<div class="clearfix">
<div class="box margin-right" style="background-color:#bbb">
<h1>
Header1
</h1>
<div class="border">
<h3>
Container1
</h3>
Some text inside the box. Some text inside the box. Some text inside the box.
</div>
</div>
<div class="box margin-left" style="background-color:#ccc">
<h1>
Header2
</h1>
<div class="border">
<h3>
Container2
</h3>
Some text inside the box.
</div>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加