BinaryDevelop
  1. ホーム
  2. html

[解決済み] 横に並んだ2つのdiv要素の高さを同じにするにはどうしたらいいですか？

2022-03-18 06:08:26

質問

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回の宣言で済みます。 

.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>

古いブラウザではプレフィックスが必要な場合があります。 対応ブラウザ .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します