在同一行上显示多个相同的内容<divs>

Question

我正在从数据库中检索产品列表，并希望在不使用表的情况下将它们全部显示在3列的行中。所以我想要3个div并排显示。然后在下面。

<div class="productindividualdisplay">
    <div class="productphoto">
        <img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
    </div>
    <div class="producttitle">
        <a href="productdisplay.php?name=<?echo $row['productid']?>"><?php echo $row['title'] ?></a>
    </div>
    <div class="productprice">
        <?php echo "<div id='productrrp'> &euro;" . $row['rrp'] . "</div>";
        if(is_null($offeringprice)) {
        echo "Not Available";
        } else {
                    echo "&euro;" .  $offeringprice['price']; 
                    }
                        ?>
        </div>

这是我的代码，但它只是在下面显示div。有可能在开始另一行之前先填满这一行吗？

Answer 1

尝试在div的css上使用display: inline-block;。

Answer 2

<div>是块级元素。块级元素，如<h1>、<p>、<table>等，将（默认情况下）跨越其父元素的整个宽度，因此它们不能相邻放置。

但是，您可以使用以下CSS规则来更改此行为：

div.column {
    display: inline-block;
}

这将把<div>呈现为内联块。

现在可以给它一个特定的width，这样三个div就可以放在一行中。请注意，当您在两个<div>元素之间留下空白时，会有一些视觉空白。如果给所有div的宽度都是33.333333333%，那么额外的空白将导致它们的组合宽度超过100%，因此第三个div将移动到下一行。

您可以通过确保HTML元素之间没有空白来防止这种情况：

<div class="column">
    <p>Some contents here</p>
</div><div class="column">
    <p>As you can see, no whitespace between the two div elements.</p>
</div>

当然，您可以使用边距手动控制空白：

div.column {
    display: inline-block;
    width: 30%;
    margin-right: 3.33333333%;
    margin-bottom: 10px;
}

您可能想看看这篇文章：使用内联块来显示产品网格视图（它使用<li>s而不是<div>s，但想法基本相同）

Answer 3

这是FIDDLE

<div class="product-wrapper">
  <div class="productindividualdisplay">
    <div class="productphoto">
      <img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
    </div>
    <div class="producttitle">
      <a href="productdisplay.php?name=<?echo $row['productid']?>">Product Title</a>
    </div>
    <div class="productprice">
      <span>$100</span>
    </div>
  </div>
  ...more products...
</div>

.product-wrapper {
  width: 960px;
  padding: 10px;
}
.productindividualdisplay {
  background: #fff;
  display: inline-block;
  width: 260px;
  margin: 5px 5px 15px 5px;
  padding: 10px;
  text-align: center;
  border: 1px solid #999;
  box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
  width: 95%;
  margin: 10px auto;
  border-bottom: 1px solid #999;
}
.producttitle a {
  font-size: 18px;
  text-decoration: none;
}
.productprice {
  font-size: 18px;
  font-weight: 600;
}