如何在另一个div中垂直对齐div？

Question

我想在另一个DIV中内联显示多个DIV元素（不同的高度）。所有这些DIV应垂直对齐TOP。如果您调整容器DIV的大小，那么DIV内部将转换为新行，第二行位置从上一行中最大的DIV开始（参见图片）：

这似乎不起作用：

.containerDiv{
    display: table-cell;
    vertical-align: top;
}

.insideDiv{
    text-align: center;
    display:inline-block;
}

Answer 1

尝试这一点，屏幕尺寸大于768像素，两组div彼此对齐

＆＃13;

＆＃13;

*{
  box-sizing:border-box;
}
.upperDiv{
  width:20%;
  background-color:red;
  float:left;
  height:100px;
  border:1px solid black;
}
.upperContain{
  width:100%;
  display:flex;
    margin:0;
  padding:0;
}
.lowerContain{
   width:100%;
  display:flex;
  margin:0;
  padding:0;
}

.lowerDiv{
  width:20%;
  background-color:green;
  height:100px;
  border:1px solid black;
  float:left;
}
@media (min-width:768px){
  .upperContain{
  width:50%;
  display:block;
    float:left;
}
.lowerContain{
   width:50%;
  display:block;
  float:left;
}
}

＆＃13;

<div class="upperContain">
  <div class="upperDiv" style="height:50px;"></div>
  <div class="upperDiv" style="height:30px;"></div>
  <div class="upperDiv" style="height:70px;"></div>
  <div class="upperDiv" style="height:40px;"></div>
  <div class="upperDiv" style="height:10px;"></div>
</div>
<div class="lowerContain">
  <div class="lowerDiv" style="height:50px;"></div>
  <div class="lowerDiv" style="height:40px;"></div>
  <div class="lowerDiv" style="height:20px;"></div>
  <div class="lowerDiv" style="height:40px;"></div>
  <div class="lowerDiv" style="height:10px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox非常适合这种布局。这是一个应该按照您的意图工作的简单示例。 Fiddle

我假设每个方框的高度由方框内的内容决定。如果要为每个框手动设置高度，则可以删除flex-start，flex-grow和flex-basis设置。

＆＃13;

＆＃13;

.container {
  border: 4px solid #000;
  display: flex;

  /* otherwise everything goes on one row */
  flex-wrap: wrap;
  
  /* Needed as otherwise it stretches to have evenly sized boxes on each row */
  align-items: flex-start;
}

.item {
  border: 4px solid #000;
  margin: 0.5em;
  
  /* can't use width: 150px, but in this case it acts as if we did. */
  min-width: 150px;
  
  /* This is needed to prevent the boxes from dynamically resizing. */
  /* alternatively: flex: 0 1 0; */
  flex-grow: 0;
  flex-basis: 0;
}

＆＃13;

<div class="container">
  <div class="item">Words words words words words words words words words</div>
  <div class="item"> words words words words words words words words words words words words words words words words words words words words words words</div>
  <div class="item"> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words</div>
  <div class="item"> words words words words words words words</div>
  <div class="item">Words words words words words words words words words</div>
  <div class="item"> words words words words words words words words words words words words words words words words words words words words words words</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个方法：

CSS：

.main-container{
    border:solid 1px #000;
    position:relative;
    display: inline-flex;
    width: 250px;
    flex-wrap: wrap;
    justify-content:center;
    padding:20px 0;
}
.secondary-div{
    border:solid 1px #000;
    width:50px;
}

HTML：

<div class="main-container">
    <div class="secondary-div" style="height:50px;">Div1</div>
    <div class="secondary-div" style="height:100px;">Div2</div>
    <div class="secondary-div" style="height:120px;">Div3</div>
    <div class="secondary-div" style="height:70px;">Div4</div>
    <div class="secondary-div" style="height:100px;">Div5</div>
    <div class="secondary-div" style="height:50px;">Div6</div>
    <div class="secondary-div" style="height:120px;">Div7</div>
    <div class="secondary-div" style="height:70px;">Div8</div>
</div>