0

以下のようなレイアウトを作成しようとしています。

 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|      |                     |      |
|      |                     |      |
|      |                     |      |
|  1   |                     |   2  |
|      |                     |      |
|_ _ _ |          5          |_ _ _ |
|      |                     |      |
|      |                     |      |
|   3  |                     |   4  |
|      |                     |      |
|      |                     |      |
|_ _ _ |_ _ _ _ _ _ _ _ _ _ _|_ _ _ |

次の 2 つの点で問題があります。

  1. 縦の列を分割します。
  2. 1 と 2 を 5 に合わせます。

サンプル/コードのある Web サイト

4

5 に答える 5

1 
#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

フィドル

于 2013-10-09T10:35:32.587 に答える
0

この簡単なコードを試してください

<table border="1">
     <tr><td >1</td><td rowspan="2" colspan="2" width="70%" align= "center" >5</td ><td >2</td></tr>
     <tr><td>3</td><td>4</td></tr>
     </table>
于 2013-10-09T10:54:14.833 に答える
0

これを試して、

<div style="width:100%">
<div style="width:15%; float:left">
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
<div style="width:70%; float:left">
</div>
<div>
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
</div>

高さはお好みで設定してください。

于 2013-10-09T10:42:56.903 に答える
-1

この CSS レイアウトを使用してみてください: The Square Grid

それはあなたの問題をすべて解決できる素晴らしいレイアウトです。

于 2013-10-09T10:36:48.397 に答える