Question

我正在撰写此页http://www.donchisciotte-lucca.it/it/offerte

你可以看到我想要4张照片，每张照片上有3个div（标题，描述和按钮）。我已将3个div放在内联块中，以便将它们垂直居中于单个图片上，但它们显示在同一行中。它们应该是每行一个，但我尝试的一切都不起作用。

我该如何解决这个问题？

非常感谢

Answer 1

您应该将整个事物包装在display:inline-block div中，而不是将这三个元素中的每一个都包含在其中。使用您使用的任何内容将包装div居中。然后像往常一样输入，每个东西都可以单独使用（或使用display:block）。

这是一个简单的示例演示

body {
  text-align: center;
}
div {
  display: inline-block;
  background: lightgray;
}
span {
  display: block;
}

<div>
  <span>Img</span>
  <span>Text</span>
  <span>Button</span>
</div>

Answer 2

无论哪种方式，我认为你会看到一个解决方法，但我认为使用display:block并找到一种方法来获得正确的垂直间距可能更有意义，而不是使用{{1并且必须强制它们在不同的行上。那么如何制作display:inline-block项目.offerte .g-array-item div，然后给它们一个％margin-top，例如：display:block。

尝试一下，看看它看起来如何？

如何使用CSS在每行放置一行内联块div？

2 个答案: