Таблицы HTML (бок о бок), не соответствующие jumbotron

Я пытаюсь разместить список продуктов в отдельных таблицах, а затем разместить их рядом для отображения.Таблицы HTML (бок о бок), не соответствующие jumbotron

Первоначально столы укладывают поверх друг друга, как это и вписываться в дизайн JumboTron:

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; } ', try' .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

Таблицы HTML (бок о бок), не соответствующие jumbotron

ответ

Смежные вопросы