javascript - CSS水平对齐两个不同高度的div

Question

我试图将 2 个高度不同的 div 水平放置在一个 div 中。使用我的代码，第二个 div box 位于第一个 div square 的底部。

box 的宽度和高度已设置，但使用 square div，高度和宽度未设置，我不想设置它。

在这种情况下，如何达到我想要的结果？如果这不能用 CSS 完成，那么使用 Jquery 也可以。

HTML

<div id="wrapper">
  <div id="square"></div>
  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text</div>
</div>

CSS

#wrapper {
  display: inline-block;
  border: 1px solid black;
}

#square {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  display: inline-block;
}

#box {
  border: 1px solid red;
  float: right;
  display: inline-block;
}

演示

jsfiddle

Answer 1

用 flexbox 试试这个.

JSfiddle . CanIUse.com

#wrapper {
  border: 1px solid black;
  display: flex;
}

#square {
  min-width: 50px;
  height: 50px;
  border: 1px solid blue;
}

#box {
  border: 1px solid red;
}

<div id="wrapper">
  <div id="square"></div>
  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text </div>
</div>