我正在尝试在单个表格中放置产品列表，然后将它们并排放置以进行显示。
最初，这些桌子可以像这样堆叠在一起，并适合巨型飞机设计：
http://i.snag.gy/zgBtG.jpg
我希望它们并排堆叠，如下所示：
http://i.snag.gy/g0huA.jpg
但是，当我这样做时，事情会变得有些混乱，桌子也不会停留在巨型设计之内。
这是我的代码：
HTML：
td {
text-align: center;
vertical-align: central;
padding: 5px;
}
.products {
float: left;
}<?php // Run a select query to get my latest 6 items // Connect to the MySQL database include "storescripts/connect_to_mysql.php"; $dynamicList="" ; $sql=m ysql_query( "SELECT * FROM products ORDER BY date_added DESC LIMIT 12"); $productCount=m ysql_num_rows($sql);
// count the output amount if ($productCount>0) { while($row = mysql_fetch_array($sql)) { $id = $row["id"]; $product_name = $row["product_name"]; $price = $row["price"]; $date_added = strftime("%b %d, %Y", strtotime($row["date_added"])); $dynamicList .= '
<table class="products" width="220px" border="1"
cellpadding="6">
<tbody>
<tr>
<td>
<a href="product.php?id=' . $id . '">
<img width="200px" height="250px" style="border: #CCCCCC 1px solid;" src="http://rapidcodes.co.uk/inventory_images/' . $id . '.jpg" alt="$dynamicTitle">
</a>
</td>
</tr>
<tr>
<td><a href="product.php?id=' . $id . '"><strong>' . $product_name . '</strong></a>
</td>
</tr>
<tr>
<td>£' . $price . '</td>
</tr>
</tbody>
</table>'; } } else { $dynamicList = "We have no products listed in our store yet"; } mysql_close(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Rapid Codes - Get it now!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<?php include_once( "template_header.php");?>
<div class="container">
<div class="jumbotron">
<p>Newest Additions</p>
<?php echo $dynamicList; ?>
</div>
<div class="row">
<div class="col-md-3">
<p>P1</p>
</div>
<div class="col-md-3">
<p>P2</p>
</div>
<div class="col-md-3">
<p>P3</p>
</div>
<div class="col-md-3">
<p>P4</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
<?php include_once( "template_footer.php");?>
</div>
</body>
</html>抱歉，代码混乱。任何帮助将不胜感激。我无法理解这一点。
最佳答案
代替.products { float: left; }，尝试.products { display: inline-block; }
浮动元素将它们带出了普通DOM结构（您可以想象这些元素好像它们位于普通DOM之上的不同层中）。在第二张图像中，您可以看到jumbotron较小，因为它无法识别表元素在其中（因为它们现在“漂浮”在了jumbotron上方），因此当它不包含任何内容时，默认为其正常大小。
通过使用display: inline-block，这些元素将保留其块空间，但不会占用它们通常会占用的整个水平空间，而只会占用它们所需的空间，从而可以将其他元素放置在它们旁边。