列布局垂直对齐

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 {border：1px solid red;溢出：隐藏;宽度：740px; }

     

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

     

.box2 {width：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上看到此示例。