css彼此相邻的定位表 [英] css positioning tables next to each other
本文介绍了css彼此相邻的定位表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用下面的HTML / CSS我有3个表。
我希望表1和2彼此相邻，在下面的表3的同一行，但它们之间有一个休息。
Using the HTML/CSS below I have 3 tables. I would like table 1 and 2 to be next to each other on the "same line" with table 3 underneath but with a break between them.
但是，当我在前两个表上使用float：left / right时，表3总是直接在下面，并触摸表1/2？
However, when I use float:left/right on the first two tables, table 3 is ALWAYS directly underneath and "touching" tables1/2?
/ float，似乎不能使事情排列：（
I have tried margin/clear/float and can't seem to make things line up :(
任何帮助感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
DIV.search
{
width: 80%;
margin-right: auto;
margin-left: auto;
}
DIV.search TABLE
{
border: 1px solid black;
border-collapse: separate;
}
DIV.search TABLE.table1
{
float: left;
width: 45%;
}
DIV.search TABLE.table2
{
float: right;
width: 45%;
}
TABLE.table3
{
border: 1px solid black;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
width: 80%;
}
</style>
</head>
<body>
<div class="search">
<table class="table1">
<tr>
<td>
TABLE 1
</td>
</tr>
</table>
<table class="table2">
<tr>
<td>
TABLE 2
</td>
</tr>
</table>
</div>
<table class="table3">
<tr>
<td>
TABLE 3
</td>
</tr>
</table>
</body>
</html>
推荐答案
您应该应用一些额外的样式：
You should apply some additional styles:
DIV.search
{
width: 80%;
margin-right: auto;
margin-left: auto;
overflow: hidden; /* Fixing the problem in modern browsers */
zoom: 1; /* Fixing in old IE by applying hasLayout */
padding-bottom: 50px; /* I prefer padding here than margin in table3 */
}
TABLE.table3
{
border: 1px solid black;
/* margin-top: 50px; */
margin-right: auto;
margin-left: auto;
width: 80%;
}
您可以尝试使用：after（在下面的答案中） IE不支持它。
You can try to use :after (in the answer below), but old IE doesn't support it.
这篇关于css彼此相邻的定位表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
