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

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

Answer 2

<div>是block-level element。块级元素（如<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;
}

您可能想看一下这篇文章：Using inline-block to Display a Product Grid View（它使用的是<li>而不是<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;
}

在同一行显示多个相同的<divs> </divs>

3 个答案: