在div中的同一行显示4个框

Question

我试图创造一个受欢迎的产品＆＃39;页面底部的栏。 这是一个例子：

但是，我遇到了多个div不会出现在同一行的问题。我已经阅读了不同的方法，包括显示：inline-block（到处都说这是一个坏主意），display：table-cell（这仍然是创建一个新行），并使用带有display的跨度：inline-阻止（还在创建一个新行。）我还尝试删除＆＃39;显示＆＃39;在我的.productbox类中，根本没有显示该框。

这是我的产品包的代码：

.productbox {
width: 168px;
height:135px;
display:inline-block;
background-color: #b2b2b2;    
}

Answer 1

如何使用flex box？这是HTML＆amp; CSS

.wrapper
{
  display: flex;
}

.wrapper div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

<div class="wrapper">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</div>

请注意，根据您的目标受众，您可能需要一些供应商前缀。 Flex虽然有很多不错的选择，但它使不同屏幕尺寸的目标变得微不足道。