从顶部开始在同一水平线的同一行中显示两个div [英] Show two div in same line in same horizontal line from top

问题描述

这是我的代码

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

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

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

我想要一个这样的视图

有没有办法做到这一点?如果可以，怎么办?

is there any way to do this? if so, how?

推荐答案

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

Just add vertical-align: top; property in .floating-box class in css. New CSS will be

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

这篇关于从顶部开始在同一水平线的同一行中显示两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！