【发布时间】：2019-08-09 10:01:04
【问题描述】：
display: inline-block 使 div 元素彼此相邻显示的技术不适用于我的动态生成内容卡片。
我的内容卡是 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>【问题讨论】：
-
这个问题不是问如何减少
display:inline-blockdivs 顶部的空白空间，它不是重复的。我实际上有这个答案，但@temani Afif 你阻止我回答...... -
OP 您能否在没有 PHP 的情况下重构您的代码，以及如何让 sn-p 运行并按照您的描述显示卡片？
-
display:inline-block不起作用的原因是，虽然卡片可能已应用，但环绕它们的div.shrink却没有。您应该 A) 将收缩 css 或类直接添加到卡并删除额外的收缩div或 B) 将display:inline-block也添加到div.shrink.这与它们是动态生成的事实没有任何关系，所以我将修改这个问题的标题。 -
附加说明：
margin: auto;会在卡片之间产生间隙。如果你不想要，那么你应该删除它。 -
嗨，阿什利。感谢您注意到这篇文章不是重复的。我从卡片类中删除了收缩类和
margin: auto，但没有运气。如果卡是硬编码的，则它们彼此相邻。如果它们是由 PHP 动态生成的，则代码似乎无法识别出第二张卡片的存在。