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

DEMO

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

Answer 2

您可以使用flexbox。 删除浮标和嵌入式块。 用display：flex包装盒子。 这使直属子代在指定的平面上灵活（ flex-direction: row ）。 指定收缩为flex:1的框。

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

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

#box {
  border: 1px solid red;
  flex: 1;
}

https://jsfiddle.net/nj163q24/

Answer 3

有两种方法可以做到这一点。 如果您稍微更改html，则可以执行以下操作：

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

#square {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
    border: 1px solid blue;

}

#box {
  border: 1px solid red;
  position: relative;
    top: 0;
  padding-left: 65px;
}

<div id="wrapper">

  <div id="box">
  <div id="square"></div>
  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>

Answer 4

像这样编辑#box ：

#box {
  border: 1px solid red;
  float: right;<---------Remove
  display: inline-block;<---------Remove
  margin-left: 50px; <---------Added
}

 * { box-sizing: border-box; } #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; margin-left: 50px; } 

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