两张桌子并排并停止自动居中
Posted
技术标签:
【中文标题】两张桌子并排并停止自动居中【英文标题】：Two tables side by side and stop the auto-center 【发布时间】：2014-06-28 14:01:10 【问题描述】：我创建了两个表格并完美地编写了代码，但是当表格足够长时，正确的表格会位于中心。我该如何解决这个问题？
这是我的代码：
#schoolmates_tableMain
width: 30%;
border: 1px;
min-width: 30%;
position: relative;
opacity: 0.99;
background-color: rgba(100, 100, 100, 0);
float: left;
#schoolmates_table
width: 59%;
border: 1px;
min-width: 59%;
position: relative;
margin: auto;
padding-top: 10px;
background: transparent;
更新
我还尝试将float:right; 放在右边的桌子上，结果如下：
右表“退出后台”，如果完全按下，您可以看到滚动条，我什至看不到“添加朋友”链接。我怎样才能让正确的桌子总是看起来像第一张照片并保持在正确的位置？
html
<div id = "green_center">
<br/><br/>
<table id = "schoolmates_tableMain" cellspacing = 30>
<tr id = "transparent">
<td width = "30%">
asdasdas
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</td>
</tr>
</table>
<br/>
<?php
while($row=mysqli_fetch_assoc($result))
$myimg = $row['img'];
$name = "".$row['firstname']." ".$row['lastname'];
$user = $row['username'];
$firstname = $row['firstname'];
$desc = $row['description'];
$email = $row['email'];
$me = $_SESSION['username'];
$id = $row['id'];
if($email==$myemail)
else
echo "<table id = 'schoolmates_table'>";
echo "<tr>";
echo "<td>";
echo "<table border = '0' width = '100%'>";
echo "<tr>";
echo "<td width = '1%'>";
echo "<div id = 'sm_padding'>";
if($myimg=="")
echo "<img width = '100' height = '100' src = './img/blank_profile.jpg' alt = 'Profile Picture'>";
else
echo "<img width = '100' height = '100' src = './profiles/".$row['img']."' alt = 'Profile Picture'>";
echo "</div>";
echo "</td>";
echo "<td>";
echo "<div id = 'home_greetings'>";
echo " ".$name."<br/>";
echo "</div>";
echo "<div id = 'home_small'>";
echo "".$row['course']." | ".$row['year']." | ".$row['university']."<br/>";
echo "<small>".$desc."</small><br/>";
echo "</div>";
echo "<div id = 'sm_small'>";
$ss="SELECT * FROM friends WHERE me = '$me' AND them = '$user'";
$rr = mysqli_query($con,$ss);
$cc = mysqli_num_rows($rr);
if($cc==1)
echo "<a href='#' style = 'text-decoration:none; color:#1f8e1c'>Friends</a>";
else
$ss2="SELECT * FROM friends WHERE me = '$user' AND them = '$me'";
$rr2 = mysqli_query($con,$ss2);
$cc2 = mysqli_num_rows($rr2);
if($cc2==1)
echo "<a href='#' style = 'text-decoration:none; color:#1f8e1c'>Friends</a>";
else
$s = "SELECT * FROM friend_request WHERE me = '$me' AND them = '$user'";
$r = mysqli_query($con,$s);
$count = mysqli_num_rows($r);
if($count==1)
echo "<a href = 'cancelrequest_com.php?user=$user&school=$theschool' style = 'text-decoration:none; color:#1f8e1c'>Cancel Friend Request</a> ";
else
$s2 = "SELECT * FROM friend_request WHERE me = '$user' AND them = '$me'";
$r2 = mysqli_query($con,$s2);
$count2 = mysqli_num_rows($r2);
if($count2==1)
echo "<a href = 'accept_com.php?user=$user&school=$theschool&id=$id' style = 'text-decoration:none; color:#1f8e1c' >Accept as Friend</a> ";
echo " or ";
echo "<a href = 'notnow_com.php?user=$user&school=$theschool&id=$id' style = 'text-decoration:none; color:#1f8e1c' >Not Now</a> ";
else
echo "<a href = 'addfriend_com.php?user=$user&school=$theschool' style = 'text-decoration:none; color:#1f8e1c' >Add to Friends List</a> ";
echo " | ";
echo "<a href = 'addfriend_com.php?user=$user' style = 'text-decoration:none; color:#1f8e1c'>View Profile</a> ";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "<td>";
echo "</tr>";
echo "</table>";
?>
<br/><br/><br/><br/><br/><br/>
</div>
这是我的 green_center 代码：
#green_center
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #D8F0DA;
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-image: url(../img/wallpaper.jpg);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
overflow: auto;
【问题讨论】：
如果出现问题，请避免使用 perfectly 之类的词。呃，float-right?
一旦第二个表超出第一个表的末尾，它将拥有整个“行”。由于您指定了margin: auto，因此您实际上是在要求它在可用空间中居中。如果您需要它保持在右侧，请考虑将其向右浮动。
这看起来像一个 列表 cmets ......所以你根本不应该使用表格......
@NicholasHazel 是的，对不起，这很愚蠢。
@dlev 我尝试删除 'margin: auto;'但在某种程度上它并没有改变任何东西..
【参考方案1】：
添加
#green_center overflow:auto
到你的CSS
【讨论】：
哪个是父母以上是关于两张桌子并排并停止自动居中的主要内容，如果未能解决你的问题，请参考以下文章
如何在晚上自动缩减 AWS EC2 实例（停止并更改为 t2.small）并在早上自动扩展（停止并转到 t2.large）？