0

我有一个非常简单的 php 页面，其中包含一个标题和一个导航侧边栏。在页面的内容区域中，我试图让两个表格彼此相邻。而不是一个接一个。

似乎在当前状态下，它们直接位于导航侧栏下方，而不是将所有内容都留在侧栏下方以供空白：

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