Question

我的页面在另一个/父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>

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: