html - 将两个表彼此相邻,同时还使用标题和侧边栏 css

标签 html css html-table sidebar

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

在当前状态下,它们似乎直接位于导航侧栏下方,而不是将侧栏下方的所有内容都留作空白:

http://jsfiddle.net/qgEbZ/

current look

desired look

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;
}

最佳答案

虽然使用 TABLES 进行布局是一种糟糕的形式,但您可以通过简单地 float 表格来实现这一点。

#content table {
    float:left;
    width:50%
}

关于html - 将两个表彼此相邻,同时还使用标题和侧边栏 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14610475/

相关文章:

php - 在我的网站内实现地址栏

javascript - 使用自定义指令在表单必填字段上动态设置 ngIf

css - :root selector is not working in the Angular component

css - 在 div 中垂直和水平居中表格

javascript - 使用 JavaScript 删除下一个 div,无需 jquery

php - MYSQL数据限制数

javascript - jQuery 过渡动画没有发生

css - 修复居中 div 左侧的 div

html - 滚动表格时如何使 <table> 的第一列不可移动?

javascript - 根据表中单击/滚动的行填充输入框