html - 2 つの DIV 間で要素を整列するにはどうすればよいですか

Question

私の Web サイト ( Code for Good ) には、いくつかの要素を含む 2 つのコンテナーがあります。

テキスト段落を作成するにはどうすればよいですか?ボタンはそれらの間に配置されますか?

Answer 1

テキストが折り返されるため、 for は高くなっています<h2>。下にDesigners and Developersある空の部分 (「デザイナーと開発者」の高さ) を削除すると、すべてが正常に整列するように見えます。<h2>Charitiesheight: 80px

Answer 2

Charities divmargin-top:20px;の最初にa を追加したところ、すべてが完全に一致しているように見えます..p

Answer 3

ボタンは div の同じ場所にあるため、問題はありません。問題は div 全体です。

Design div と Charity div は高さが異なります (580 と 590)。両方を同じにすると、ボタンはテキスト自体と同じになります。（うまくコーディングできていれば）

Answer 4

4 つの div を使用することをお勧めします。そのうちの 2 つは実際のテキストと詳細用です。他の 2 つは、ボタンのコンテナです。2 つのテキスト div に固定の高さを設定します。

<div id="left">
  <div class="text">
    <h2>Caption 1</h2>
    <p>Details are here</p>
  </div>
  <div class="button_container">
    <div>Button</div>
  </div>
</div>
<div id="right">
  <div class="text">
    <h2>Caption 2</h2>
    <p>Details are here, and are much longer than the ones in the first div so that the text wraps.</p>
  </div>
  <div class="button_container">
    <div>Button</div>
  </div>
</div>

CSS:

#left, #right {
  width : 50%;
}

.text {
  height: 400px; // Or any fixed size that makes sense
}

固定サイズの 2 つの多数の div をネストすることになった場合は、テーブルの使用を検討するか、Bootstrapで提供されているようなグリッド システムを使用する必要があります。