Question

我正在尝试在div中水平放置两个不同高度的div。使用我的代码，第二个div \\[a-z], \\\[a-z],会停留在第一个div box的底部。

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

有了这个条件，如何实现我想要的结果？如果使用CSS无法做到这一点，那么使用Jquery也很好。

HTML

square

CSS

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

样本

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包装盒子。这使得直接儿童在指定的平面（struct utsname）上变得灵活。指定缩小为flex-direction: row的框。

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>

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

4 个答案: