Question

我有几个div并排（在表格内）。

我已经设计了这些样子，以便它们是彩色块。

如果div中的所有文本都适合两行，那么它可以正常工作。但如果一个溢出到另一行，整个div向上移动一行。如何在保持相同的div宽度并使文本流入下面的行

的同时阻止这种情况发生

我在文本中使用了中断以确保当文本适合一行时间隙仍然存在，但我显然需要删除此假设。

#main {
  margin-top:15vw;
  margin-left:5vw;
  margin-right:5vw;
  padding-right:3vw;
  padding-left:3vw;
  font-family:'Hind', sans-serif;
  color:black;
  text-align:center;
  position:relative;
  font-size:2vw;
  z-index: 2;
  background-color:white;
}

#green{
  background-color: #f0f0df;
  display: inline-block;
  margin:1vw;
  height: 8vw;
  width: 12vw;
  line-height: 3vw;
  border-radius: 0.5vw;
}

<div id=main>

<div id=green>Title 1<br><b>Answer 1</b></div><div id=green>Title 2 (long title)<br><b>Answer 2</b></div><div id=green>Title 3<br><b>Answer 3</b></div><p id="rep">Additional text goes here. This text needs to be here but is not important and so does not need a box of its own. It is styled with italics and smaller font, and will probably be ignored.</p>
  
</div>

Answer 1

将vertical-align: top;提交给#green

#main {
  margin-top:15vw;
  margin-left:5vw;
  margin-right:5vw;
  padding-right:3vw;
  padding-left:3vw;
  font-family:'Hind', sans-serif;
  color:black;
  text-align:center;
  position:relative;
  font-size:2vw;
  z-index: 2;
  background-color:white;
}

#green{
  background-color: #f0f0df;
  display: inline-block;
  margin:1vw;
  height: 8vw;
  width: 12vw;
  line-height: 3vw;
  border-radius: 0.5vw;
  vertical-align: top;
}

<div id=main>

<div id=green>Title 1<br><b>Answer 1</b></div><div id=green>Title 2 (long title)<br><b>Answer 2</b></div><div id=green>Title 3<br><b>Answer 3</b></div><p id="rep">Additional text goes here. This text needs to be here but is not important and so does not need a box of its own. It is styled with italics and smaller font, and will probably be ignored.</p>
  
</div>

造型并排div块，使它们保持一致

1 个答案: