-2

私はこのcssテンプレートを構築しようとしています:

レイアウト

各ブロックの説明と高さは次のとおりです。

ブロック 1

  • 幅: ページの幅
  • 高さ: 100px

ブロック 2

  • 最小幅: 300px;
  • 幅はコンテンツとともに大きくなります。
  • 高さ: ブロック 1 によって残されたすべての高さ

ブロック 3

  • width: ブロック 2 によって残されたすべての幅
  • 高さ: ブロック 1 と 4 によって残されたすべての高さ

ブロック 4

  • width: ブロック 2 によって残されたすべての幅
  • 高さ: 150px

また、各ブロック間の余白は 20px です。最終的なレイアウトの幅と高さは、ページのスペース全体を埋める必要がありますが、それ以上ではありません (スクロールバーなし)。

私はテーブルを使用してそれを行うことができますが、div ベースの css が必要です。それを行う方法のアイデア。

PS: コンパスを使用しています

編集: これは私がやろうとしていることのデモです:

http://jsfiddle.net/jcEwJ/1/

しかし、私が使用するhtmlは次のとおりです。

<table>
    <tr>
        <td colspan="2" class="block1">
            <div class="block">
                Block 1
            </div>
        </td>
    </tr>
    <tr>
        <td rowspan="2" class="block2">
            <div class="block">
                Block 2
            </div>
        </td>
        <td class="block3">
            <div class="block">
                Block 3
            </div>
        </td>
    </tr>
    <tr>
        <td class="block4">
            <div class="block">
                Block 4
            </div>
        </td>
    </tr>

</table>
4

1 に答える 1

1

ほら…ラフで速いし、そこには多くの間違いがあります…そしておそらく微調整が必​​要になるでしょうが、それは始まりです…

デモ

#block1 {
width:100%;
height:100px;
background:black;
margin-bottom:20px;
}

#block2 {
float:left;
min-width:300px;
width:20%;
height:100%;
margin-right:20px;
     }

#block3 {
width:70%;
float:left;
background:red;
min-height:400px;
margin-bottom:20px;
    }

#block4 {
width:70%;
float:left;
height:150px;
     }
于 2013-06-24T21:50:37.653 に答える