html - 列布局垂直对齐

Question

我希望实现以下布局：

但是，我似乎无法让文本正确垂直对齐。

我尝试了浮动 div，但无法使其正常工作。

使用最少的创建上述元素而不使用表格的最简单、最语义化的方式是什么？

Answer 1

如果您真的想使用 div，请执行以下操作：

<div style="overflow:auto">
    <div style="float:left">left stuff</div>
    <div style="float:right">
        <div>right top stuff</div>
        <div>right bottom stuff</div>
    </div>
</div>

如果需要，给出适当的宽度/高度

Answer 2

我认为它align="center"在您正在寻找的元素本身上。

这有效：

<table border="1px" width="100px" height="100px">
   <tbody>
          <tr>
             <td align="center" width="50px" rowspan="2">HI</td>
             <td align="center" style="vertical-align:center;" width="100"> test </td>
          </tr>
          <tr>
             <td align="center" style="align:center;vertical-align:center;" width="100"> test2 </td>
        </tr>
    </tbody>
</table>

Answer 3

.wrapper { 边框：1px 纯红色；溢出：隐藏；宽度：740px；}

.box { 高度：300px; 宽度：400px；边框：1px 纯蓝色；位置：相对；向左飘浮; }

.box2 { 宽度：300px; 高度：200px；位置：相对；
边框：1px 纯红色；溢出：隐藏；}

.inside { 位置：绝对；左：93px；顶部：21px；宽度：135px；高度：84px；显示：表格；
}

.inside p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

html

<div class="box">wererewrwe
</div>

 <div class="box2">
    <div class="inside">
      <p>inside</p>
  </div>
<div>

Answer 4

以下解决方案适用于所有现代浏览器和 IE8+。如果您需要与 IE6 和 IE7 兼容，那么我建议使用表格。

<div class="block">
    <div class="left">Left</div>
    <div class="right" style="background: red"><p>Text</p></div>
    <div class="right" style="background: blue"><p>Text</p></div>
</div>

和

div.block { width: 640px; height: 480px; border: solid 2px black; padding: 4px; }
div.left { float: left; width: 320px; height: 480px; background: green; }
div.right { float: right; width: 320px; height: 240px; display: table;}
div.right p { display: table-cell; vertical-align: middle; text-align: center; }

你可以在jsfiddle上看到这个例子。