Php 为什么'；t显示：我的HTML的内联块工作？

display:inline block

技术使div元素彼此相邻对动态生成的内容卡不起作用

我的内容卡是w3schools网站上教程的修改版，可在以下位置找到：

目标

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

问题

每个匹配都会生成相应的内容卡，但是，它们会显示在彼此下方（垂直）的单独行上。我试图使用

display:inline block

技术强制它们彼此相邻，但没有结果。我怀疑原因是因为每个内容卡的代码必须已经存在，才能产生效果。如果没有，CSS和HTML假定只有一张内容卡，并且没有正确对齐它们

内容卡的HTML/CSS/PHP代码

.card{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
最大宽度：300px；
保证金：自动；
文本对齐：居中；
字体系列：arial；
宽度：30%；
}
.卡片按钮{
边界：无；
大纲：0；
填充：12px；
颜色：白色；
背景色：#000；
文本对齐：居中；
光标：指针；
宽度：20%；
字号：18px；
}
.卡按钮：悬停{
不透明度：0.7；
}
.收缩{
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
-ms变换：比例（0.8）；
变换：比例（0.8）；
}

---

只需在类中添加卡片{float:left}就很容易了，然后它就可以根据您的需要工作了

使用

内联块

时，您还必须在

上设置固定宽度。收缩

，它是重复的保持架，并且可能是

垂直对齐

现在首选的方法是设置

display:flex；flex wrap（柔性包裹）：在容器上包裹

，该容器仅用于此类盒子显示。还可以使用此解决方案在

.shrink

上设置宽度

---

您的

.card

很好地显示为内联块，但它们都包装在一个

.shrink

中，这是一个完整的块。这就是为什么他们没有像你期望的那样排列。

这个问题不是问如何减少

display:inline block

divs顶部的空白，它不是重复的。我确实有答案，但是@temani af如果你阻止我回答…OP你能在没有PHP的情况下重构你的代码吗？这样代码片段就可以按照你的描述运行并显示卡片了吗？原因是

display:inline block

不起作用，因为虽然卡片可能已经应用了这些功能，环绕它们的

div.shrink

。您应该A）将收缩css或类直接添加到卡中并移除额外的收缩

div

，或者B）将

显示：内联块

也添加到

div.shrink

。这与它们是动态生成的这一事实无关，所以我将修改这个问题的标题将在卡之间创建间隙。如果你不想要，那你应该把它拿走。嗨，艾希礼。谢谢你注意到这篇文章不是重复的。我从卡片类中删除了收缩类和

margin:auto

，但运气不好。如果卡是硬编码的，则卡会彼此相邻。如果它们是由PHP动态生成的，那么代码似乎无法识别是否存在第二张卡。感谢您的输入，但这并没有将我的内容卡并排排列。请使用定义您的.card类。缩小我已测试的内容卡，一切都很完美