css div坚持在边界上响应

Question

我有使用div.wrapper的div.items和display:inline-block

我想在它们上添加填充物，但我也想让这些物品粘在左右产品上。

如何做出反应呢？

这是我的HTML

    <div class="wrapper">
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
    </div>

下面是我想要的布局：

​

​

Answer 1

此外，您还可以使用display: flex和响应性使用flex: 0 0 200px/*this is for example*/;。

​

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  border:1px solid #000;
}

.wrapper>div {
  width: 30%;
  flex: 0 0 200px;
  height: 100px;
  outline: 1px solid red;
  margin: 20px;
}

<div class="wrapper">
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
</div>

​

Answer 2

做相应的改变，希望这能解决你的问题。

display : flex
flex-direction:row;
justify-contents:space-around