0

4つの中央のテーブル（ヘッダー、ナビゲーション、コンテンツ、フッター）があります：

<table id="header" width="760" align="center">...</table>
<table id="navigation" width="760" align="center">...</table>

<table width="760" height="28" border="0" align="center" id="content">
    ...
</table>

<table id="footer" width="760" align="center">...</table>

上記の例からいくつかのコード（境界線、セルパディングなど）を削除しました。これにより、テーブルが画面の中央に配置され、width=760になります。この場合、画面の左右の余白に空白が含まれています。これらの空白に4つの画像を配置する必要があります（テーブルの左側に2つの画像、垂直に配置する画像、右側に2つの画像-これも他の画像の上に配置します）。

したがって、おそらく2つのdiv（LeftdivとRightdiv）を作成する必要があります。そして、それらのDivをすべてのテーブルの左側とすべてのテーブルの右側に揃える必要があります。

左のDIV|すべてのテーブル| 右DIV

画像には最大許容幅がありますが、事前定義された高さはありません。

これを行う方法がわかりません...私は通常バックエンドを行うので、CSSはあまり必要ありません。しかし、このプロジェクトではありません...通常、レイアウトにはテーブルではなくDivを使用し、次に左右のDivにはposition = "relative"を使用しますが、テーブルでは機能しないようです。

手がかりを教えてください。

4

1 に答える 1

2

テーブルをdivでラップする必要があります。このjsfiddleを見てください。あなたはあなた自身の好みに合わせてCSSを調整することができますが、それはあなたが望むことをする方法です。

EDITは、 の代わりにclearfixをoverflow: hidden;追加し、両側に2つの画像を追加しました。
ここでのEDIT2は、レイアウトを中央に配置する方法です。jsfiddle

<div id="wrapper clearfix">
  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
  </div>

  <div class="main-content">
    tables
  </div>

  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
  </div>
</div>​



.side-div {
    float: left;
    width: 60px;
    min-height: 100px;
    background-color: #ccc;
    padding: 0 10px;
}

.main-content {
    float: left;
    min-height: 100px;
    background-color: #ccddff;
    padding: 0 10px;
}

/*clearfix instead of overflow: hidden;*/

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

.clearfix {
    display: block;
}

</ p>

于 2013-01-01T11:16:58.637 に答える