Question

在我的动态生成的内容卡中，使div元素彼此相邻出现的display: inline-block技术不起作用。

我的内容卡是在w3schools网站上找到的教程的修改版本，可以在这里找到：

https://www.w3schools.com/howto/howto_css_cards.asp

目标

我正在基于一个查询来为我的网站创建一个相对简单的搜索引擎，该查询检查MySQL数据库是否存在任何潜在的匹配项。结果以内容卡的形式返回。如果系统找到3个匹配项，则结果中将生成3个内容卡。该代码由for循环（PHP）控制，该循环为找到的每个匹配项生成一个内容卡。

问题

为每个匹配生成相应的内容卡，但是它们出现在彼此下方（垂直）的单独行上。我尝试使用display: inline-block技术将它们强制相邻，但没有结果。我怀疑原因是因为每个内容卡的代码必须已经存在才能生效。如果没有，CSS和HTML会假设只有一张内容卡，并且无法正确对齐它们。

内容卡的HTML / CSS / PHP代码

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
  width: 30%;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 20%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.shrink {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

<!-- Container -->
<div class="container" style="background-color: white; width:89%; padding-top: 400px;">

  <!-- Generates 1 Content Card for each Match -->
  <?php
for($x = 0; $x < count($title); $x++) {
?>

    <!-- Content Card Design & Data -->
    <div class="shrink">
      <div class="card" style="background-color: white; border-radius: 2%; display: inline-block;">
        <a href="#" data-toggle="modal" data-target="#ModalCarousel<?php echo " $x ";?>" style="text-decoration: none; color: black;">
  <img src="listingimages/<?php echo "$firstListingImage[$x]";?>" style="width:100%; border-top-left-radius: 2%; border-top-right-radius: 2%;">
  <h4><?php echo "$title[$x]";?></h4>
  <hr>
  <p><span class = "glyphicon glyphicon-cutlery"></span>   <?php echo "$foodType[$x]";?></p>
  <hr>
  <p><span class = "glyphicon glyphicon-map-marker"></span>   <?php echo "$city[$x]";?>, <?php echo "$state[$x]";?></p>
  <hr>
  <p style="font-size: 30px;"><b>$<?php echo "$price[$x]";?></b><span style="font-size: 15px;">  USD</span></p>
  </a>
      </div>
    </div>

    <?php } ?>

</div>

Answer 1

这很简单，只需要添加.card {float：left}类即可，然后按需要运行

Answer 2

要使inline-block起作用，还必须在.shrink上设置一个固定宽度，该宽度是重复的持有人，也许还有vertical-align
如今，首选的方法是通过在容器上设置display:flex; flex-wrap:wrap来专门针对这种盒子显示。使用此解决方案，还可以在.shrink上设置宽度。

Answer 3

您的.card可以很好地显示为内联块，但它们分别包装在.shrink内，它们是完整的块。这就是为什么他们没有像您期望的那样排队。

为什么我的HTML不能显示：内联阻止功能？

3 个答案: