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

.wrapper {border：1px solid red; オーバーフロー：非表示; 幅：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 3

The following solution works in all modern browsers and IE8+. If you need compatibility with IE6 and IE7 then I suggest using tables.

<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>

and

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; }

You can see this example on jsfiddle.

Answer 4

I think it's align="center" on the element itself that you're looking for.

This works:

<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>