我有一个非常简单的 php 页面,其中包含一个标题和一个导航侧边栏。在页面的内容区域中,我试图让两个表彼此相邻。而不是彼此叠加。
在当前状态下,它们似乎直接位于导航侧栏下方,而不是将侧栏下方的所有内容都留作空白:
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/