css - 2 列の動的レイアウト

Question

以下のものが入った箱がいくつかあります！

<div class="box">
  <div class="image">
    <img src="anything.png" /> <!-- The width is dynamic -->
  </div>
  <div class="box-text">
    <h2>Some Title</h2>
    <p>Lorem ipsum ...</p>
  </div>
</div>

問題は、テキストが画像の後に左に浮くことです。次の画像でマークしたように、まっすぐ下に行きたいです。

---

---

これは次のようになります。

tablesまたはを使用したくありませんjavascript。画像の幅が動的であるため、ボックステキストにマージン左を使用できません。

貢献していただきありがとうございます。

Answer 1

box クラスに display: table を使用し、image クラスと box-text クラスの両方に display: table-row を使用してみてください。次に、vertical-align: top を使用してコンテンツを画像とテキストの上に揃えます。

Answer 2

このCSSを試してください：

.image { float: left; }
.box-text { float: left; }

また、div の後でフローティング要素を停止することもできますbox。そのため、最後にいくつかのクリーンアップを忘れないでください。

<div style="clear:both"></div>

Answer 3

表は使用せず、 を表<div>のセルのように機能させ、インライン コンテンツを垂直方向に上部に揃えます。

​.box{display:table}
.image{display:table-cell;vertical-align:top;}
.box-text{display:table-cell;vertical-align:top;}

ここで確認してください

Answer 4

このレイアウトを実現する方法を示すフィドルは次のとおりです: http://jsfiddle.net/X7j4P/

.box {
    overflow:hidden;
}
.image {
    float:left;
}
.image img {
    width:300px;
}
.box-text {
    width:300px;
    float:left;
}
p {
    margin-bottom:10px;
}