html - 如何使页面顶部的两个表格彼此相邻对齐

Question

我希望让这两个框并排对齐，但我一直生成的是两个框，其中一个框位于页面中心并且非常小，导致另一个框在键入文本时缩小进去。这些表位于页面的 php 部分。

echo "<table style='width:100%;'><tr><td>";
echo "<div style='min-height:500px;margin-top: 10px;'><table style='-moz-border-radius:  15px;border-radius: 15px;border-bottom:1px solid gray;align: left;float: left;background- color:white;margin: auto;width: 75%;'><tr style='font-weight:bold;'><td></td><td>Title</td> <td>Date</td><td>City</td></tr>";
//header('Content-type: text/html; charset=utf-8');
//print_r(mysql_fetch_array($result));
while($row = mysql_fetch_array($result))
{ 
$abcd = $row['fname'];
 echo "<tr><td><img src='../login/image/".$row['name']."'  style='width: 125px;height: 94px;'></td>";
 echo '<td><form action="deals.php" method="get" style="margin:0px;"><input type="hidden" value="';
 echo $abcd;
 echo '" name="name"><input type="submit" style="background-color: white;border: none;color: #FF0000;text-decoration: underline;" name="submit2" value="';
 echo $abcd;
echo '"></form><br/>';
echo "</td><td>".$row['stdate']."</td>";
echo "</td><td>".$row['city']."</td></tr>";
$y++;
}
echo "</table></div>";
echo "</td><td>";
echo "<div style='-moz-border-radius: 15px;border-radius: 15px;height:10%;width: 50%;padding: 30px;background-color:white;align: right;float: right;margin: auto;margin-top:5px;'>"; 
 echo "</td></table>";

Answer 1

最好将您的 CSS 和 PHP 脚本分开，这样可以更清楚地看到您的 CSS 属性。尝试附加一个变量而不是每次都添加 echo。您可能为您的样式写了“align”而不是“text-align”。

$string = "<table style='width:100%;'><tr><td>";
$string .= "<div class="my-style"><table>";
$string .= "...";

然后在你的 CSS 文件中:

.my-style {
min-height:500px;
margin-top: 10px;
}

.my-style table {
-moz-border-radius:15px;
border-radius: 15px;
border-bottom:1px solid gray;
text-align: left;
float: left;
background- color:white;
margin: auto;width: 75%;
}

更新

如果你想并排放置两个表:

.table1 {
    width:auto;
    max-width:49%;
    display:block;
    float:left;
}
.table2 {
    width:auto;
    max-width:49%;
    display:block;
    float:right;
}