不改dom结构如何通过该样式满足需求，场景如下：

Question

// dom
<div class="container">
    <div class="item">aaa</div>
    <div>
        <div class="item">bbb</div>
        <div class="item">ccc</div>
        <div class="item">ddd</div>
        <div class="item">eee</div>
        <div class="item">fff</div>
        <div class="item">ggg</div>
        <div class="item">hhh</div>
    </div>
</div>

// css
.container {
    width: 500px;
    background-color: #f0f0f0;
}

.item {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-left: 10px;
    margin-top: 10px;
}

当前结果

请问大神如何通过只改样式，实现下面的期望结果

Answer 1

上面几位大佬说用左浮动（float:left）没啥问题，但是为了兼容性更好，防止掉坑，建议使用盒模型（display:flex;）
怎么用？可以看下这篇文章：https://www.cnblogs.com/echolun/p/11299460.html

Answer 2

楼上的改法，发现实际效果是左边距不等距，有偏差，不知道为啥。
可以这样改：

    .container {
      min-height: 240px;
      height: auto;
      width: 500px;
      background-color: #f0f0f0;
    }

    .item {
      height: 100px;
      width: 100px;
      display: inline-block;
      background-color: lightblue;
      float: left;
      margin-left: 10px;
      margin-top: 10px;
    }

Answer 3

因为你container的长度固定了，所以直接用float就可以达到效果， 楼上的已经给出回答了~

.container>.item {
  float: left;
}

Answer 4

.container .item {
    float: left;
}

最简单的办法了~

Answer 5

.container>.item {
  float: left;
}

---

楼下提到了间距的问题，我已经在评论里做了回复，解决方法也很简单

.item {float: left}

当然，这个只是刚好float可以作为一种解决方案也正好是期望布局所实现的方案，所以一开始给的只是实现所需布局的方案，解决间距的问题还有多种方案