0

ヘッダーとナビゲーション サイドバーを含む非常に単純な php ページがあります。ページのコンテンツ領域で、2 つのテーブルを隣り合わせに配置しようとしています。互いの上にあるのではなく。

現在の状態では、空白のためにサイドバーの下にすべてを残すのではなく、ナビゲーション サイド バーのすぐ下に移動しているようです。

http://jsfiddle.net/qgEbZ/

現在の外観

望ましい外観

HTML

<HTML>
    <HEAD>
        <link rel='stylesheet' type = 'text/css' href = 'default.css' />
    </HEAD>
    <BODY>
        <div id = 'headContainer'>
            <div id = 'header'>
                <?php include 'header.html'; ?>    
            </div>
        </div>
        <div id = 'sideContainer'>
            <div id= 'navMain'>
                <?php include 'sidebar.html'; ?>
            </div>
        </div>
        <div id = 'content'>
            <TABLE>
                <TR>
                    <TD>Left Table</TD>
                </TR>
                <TR>
                    <TD>Left Table</TD>
                </TR>
            </TABLE>
            <TABLE>
                <TR>
                    <TD>Right Table</TD>
                </TR>
                <TR>
                    <TD>Right Table</TD>
                </TR>
            </TABLE>
        </div>
    </BODY>
</HTML>

CSS

#sideContainer {
    float:left;
}

#navMain {
    margin-left:25px;
    color:#999999;
    font-family:Tahoma, Geneva, sans-serif;
}

#headContainer {
    width: 100%;
    position:relative;
    top:0px;
    height: 150px;
}

#header{
    margin:0px auto;
    height: 150px;
}

#content {
    float:left;
    padding-left: 10px;
    padding-top: 10px;
}
4

2 に答える 2

3

レイアウトに TABLES を使用するのは悪い方法ですが、テーブルをフローティングするだけでこれを実現できます。

#content table {
    float:left;
    width:50%
}
于 2013-01-30T17:55:40.537 に答える
0

別のオプションは、持っている各テーブルにクラスを追加し、CSS make を使用して正しい位置にフローすることです...

私はあなたのサンプルに変更を加えました...

http://jsfiddle.net/qgEbZ/1/

<TABLE class = 'leftTable'>
 <TR>
    <TD>Left Table</TD>
  </TR>
  <TR>
    <TD>Left Table</TD>
  </TR>
</TABLE>
<TABLE class = 'midTable'>
  <TR>
     <TD>Right Table</TD>
  </TR>
  <TR>
     <TD>Right Table</TD>
  </TR>
</TABLE>

そしてCSSよりも

.leftTable{
  position:absolute;
  float: left;
}
.midTable{
  position:absolute;
  float: left;
  left:100px;
}

ところで、テーブルを削除してdivを使用しても同じ結果が得られます（すでに多くの人が提案しているように:)）

于 2013-01-30T18:01:57.160 に答える