javascript - CSS horizontally align two divs with different height - Stack Overflow

admin管理员组

文章数量:1354714

I am trying to place 2 divs with different height next to each other horizontally that are in a div. With my code, the second div box stays at the bottom of the first div square.

box's width and height are set BUT with square div, height and width are not set and I don't want to set it.

With this condition, how do achieve the result that I want? and If this cannot be done with CSS, using Jquery is fine as well.

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

I am trying to place 2 divs with different height next to each other horizontally that are in a div. With my code, the second div box stays at the bottom of the first div square.

box's width and height are set BUT with square div, height and width are not set and I don't want to set it.

With this condition, how do achieve the result that I want? and If this cannot be done with CSS, using Jquery is fine as well.

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 16, 2017 at 5:37 H.KimH.Kim 27711 gold badge1111 silver badges2525 bronze badges 1

• try to remove /* float: right; / / display: inline-block; */ from div with id box – knizer Commented Jul 16, 2017 at 5:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Try this with flexbox.

JSfiddle. CanIUse.

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

You can use flexbox. Remove your floats and inline blocks. Wrap the boxes with display:flex. This makes immediate children flexible along the plane specified (flex-direction: row). Specify the box that shrinks as 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/nj163q24/

There are a couple of ways to do this. If you change your html slightly, you can do something like this:

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

Just Edit #box like :

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

本文标签： javascriptCSS horizontally align two divs with different heightStack Overflow