不適合jumbotron的HTML表（並排）

我試圖在各個表中放置產品列表，然後將它們並排放置以便顯示。不適合jumbotron的HTML表（並排）

原來，表堆疊在彼此的頂部像這樣和超大屏幕設計中滿足：

http://i.snag.gy/zgBtG.jpg

我希望他們堆放並排像這樣：

http://i.snag.gy/g0huA.jpg

但是，當我這樣做的時候，事情會變得有些混亂，表格不會保留在jumbotron設計中。

這裏是我的代碼：

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>

道歉亂碼。任何幫助將不勝感激。我無法理解這一點。

來源

2015-09-08 James

而不是'.products {float：left; }'，嘗試'.products {display：inline-block; }' – indubitablee

工作就像一個魅力！爲什麼我沒有嘗試，我不知道。非常感謝！ – James

不客氣，我把它作爲答案發布，並附有一些解釋。 – indubitablee

而不是做.products { float: left; }，嘗試.products { display: inline-block; }

浮動元素帶他們脫離正常的DOM結構的（你能想象這些元素，就好像它們是正常的DOM上述不同的層上）。在第二張圖片中，您可以看到jumbotron更小，因爲它不會識別表格元素在裏面（因爲它們現在在「jumbotron」上方「漂浮」），因此它在不包含內容時默認爲其正常大小。

通過使用display: inline-block，元素保留其塊空間，但不佔用他們通常所需的整個水平空間，而只佔用他們需要的空間，這允許將其他元素放置在它們旁邊。

來源

2015-09-08 20:44:22 indubitablee

不適合jumbotron的HTML表（並排）

回答

相關問題