从顶部在同一水平线上的同一行显示两个div

Question

这是我的代码

＆＃13;

＆＃13;

.floating-box {
  display: inline-block;
  width: 150px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.after-box {
  border: 3px solid red;
}

＆＃13;

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">
  <pre>
    testing
    testing
    testing
    testing
    testing
    testing
    testing
    </div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    <div class="floating-box">Floating box</div>
    
    <div class="after-box">Another box, after the floating boxes...</div>

＆＃13;

＆＃13;

＆＃13;

我希望有这样的观点

有没有办法做到这一点？如果是这样，怎么样？

Answer 1

只需在css中的vertical-align: top;类中添加.floating-box属性即可。 新的CSS将是

.floating-box {
  display: inline-block;
  width: 150px;
  margin: 10px;
  border: 3px solid #73AD21;
  vertical-align: top;
}

Answer 2

Flexbox是你的朋友。我不知道你想要多么灵活或流畅，但它应该足够接近。

特别注意calc()功能。它会处理您设置的边框厚度和边距。

*{box-sizing: border-box;}

.flex {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex > div {
  flex-grow: 1;
  width: calc(33% - 6px - 20px);
  max-width: calc(33% - 6px - 20px);
}

.floating-box {
  margin: 10px;
  border: 3px solid #73AD21;
}

.after-box {
  border: 3px solid red;
}

<h2>The New Way - using inline-block</h2>

<div class="flex">
  <div class="floating-box">Floating box</div>
  <div class="floating-box">
    <pre>
testing
testing
testing
testing
testing
testing
testing
</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>


</div>

<div class="after-box">Another box, after the floating boxes...</div>

Answer 3

对display:inline-table课程使用vertical-align:top和.floating-box。 所以，新的CSS将是 -

.floating-box {
  display: inline-table;
  width: 150px;
  margin: 10px;
  border: 3px solid #73AD21;
  vertical-align: top;
}

或者，您也可以单独使用float: left而不是display:inline-table和vertical-align:top来执行此操作。但为此，您需要指定一个高度（例如，height: 150px），这将导致大量空格，