如何在另一个 DIV 内联中显示固定大小的 DIV？答案

【问题标题】：How to display fixed size DIVs within another DIV inline?如何在另一个 DIV 内联中显示固定大小的 DIV？
【发布时间】：2017-01-19 02:45:28
【问题描述】：

我的页面在另一个/父 DIV 内联中显示固定大小的 DIV。它工作正常。它将额外的 DIV 移动到另一行。见下图：

当 DIV 内容超过一行时，就会出现问题。 DIV 大小仍然是固定的，但它会将其他 DIV 向下移动。见下图：

那么如何以固定大小和位置显示所有 DIV，而不管它的内容是什么。（假设内容行数不会超过 DIV 高度）。这是我的页面：

<html><head>

<style>
.parentDiv{
    background-color:   #eeeeee;
}

.childDiv{
    display:            inline-block;
    background-color:   #66ff99;
    width:              200px;
    height:             100px;
    padding:            20px;
    margin:             5px;
}

</style>
</head>

<body>
<div class="parentDiv">
    <div class="childDiv">
        test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 
    </div>

    <div class="childDiv">
        test 1
    </div>

    <div class="childDiv">
        test 1
    </div>

    <div class="childDiv">
        test 1
    </div>
    <div class="childDiv">
        test 1
    </div>
    <div class="childDiv">
        test 1
    </div>
    <div class="childDiv">
        test 1
    </div>
    <div class="childDiv">
        test 1
    </div>
    <div class="childDiv">
        test 1
    </div>                    
    <div class="childDiv">
        test 1
    </div>    

</div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

在.childDiv 中设置vertical-align:top，因为inline-block 默认为vertical-align:baseline

.parentDiv {
  background-color: #eee;
}
.childDiv {
  display: inline-block;
  vertical-align: top;
  background-color: #6f9;
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 5px;
}

<div class="parentDiv">
  <div class="childDiv">
    test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1
  </div>

  <div class="childDiv">
    test 1
  </div>

  <div class="childDiv">
    test 1
  </div>

  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
  <div class="childDiv">
    test 1
  </div>
</div>

【讨论】：