☰

2 つの隣り合った div 要素の高さを同じに保つにはどうすればよいですか? 質問する

tag-icon • tag-icon html css
2 つの隣り合った div 要素の高さを同じに保つにはどうすればよいですか? 質問する

2 つの div 要素が並んでいます。これらの高さを同じにして、片方のサイズを変更しても同じままにしたいと思っています。テキストが配置されたために片方のサイズが大きくなると、もう片方もその高さに合わせて大きくなる必要があります。しかし、これがわかりません。何かアイデアはありますか?

<div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!
    </div>
</div>

ベストアンサー1

フレックスボックス

flexbox では宣言は 1 つだけです:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

古いブラウザではプレフィックスが必要な場合があります。ブラウザのサポート。

おすすめ記事