div 的 HTML 布局

Question

如何生成具有以下布局的 div，以便在调整大小时调整其内容？我应该如何构造它，以便我可以使用媒体查询？我是否需要另一个 div 来包装所有这些？

+-----------+---------------------------------------+
+           + Title                                 +
+Image      + Description                           +
+           +                                       +
+-----------+---------------------------------------+
+Another container                                  +
+                                                   +
+---------------------------------------------------+   

更新:使用了两个答案并提出了 http://jsfiddle.net/EzV4R/10/

Answer 1

如果您想充分利用 CSS3 并取消内联样式(不好的)和 float ，请尝试:

Demo Fiddle

它有额外的好处:

1. 随页面调整大小

2. 将包含图像的单元格最小化为只有图像大小(宽度)

HTML

<div class='table'>
    <div class='cell'>Image</div>
    <div class='cell'>Title<br />Description</div>
    <div class='caption'>Another container </div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}
.cell :first-child{
    width:1%;
}
.caption {
    display:table-caption;
    caption-side:bottom;
}
.cell, .caption {
    border:1px solid black;

}