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。你可能为你的风格写了“对齐”而不是“ 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;
}

如何在页面顶部将两个表彼此相邻对齐

1 个答案: