我试图将产品列表放在单独的表格中，然后将它们并排放置以进行显示。
最初， table 像这样堆叠在一起并适合超大屏幕设计:
我希望它们像这样并排堆叠:
但是，当我这样做时，事情变得有点困惑，表格没有留在超大屏幕设计中。
这是我的代码:
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; }
float 元素将它们带出正常的 DOM 结构(您可以想象这些元素就好像它们位于正常 DOM 之上的不同层上)。在您的第二张图片中，您可以看到超大屏幕变小了，因为它无法识别其中的表格元素(因为它们现在“漂浮”在超大屏幕上方)，因此当它不包含任何内容时默认为正常大小。
通过使用display: inline-block，元素保留了它们的 block 空间，但不会像通常那样占用整个水平空间，而是只占用它们需要的空间，这允许其他元素放在他们旁边。
关于HTML 表格(并排)不适合超大屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32466568/