0

I have two div in the page: one in the left called "menu", the other in the right called "content", and there're two children inside the left div.

html:

<div>
  <div class="menu">
    <div class="menu-item">
      menu1
    </div>
    <div class="menu-item">
      menu2
    </div>
  </div>
  <div class="content">
    some content
  </div>
</div>

css:

div{
  border-style:solid;
}

.menu{
  display:inline-block;
}

.content{
  display:inline-block;
}

(jsfiddle: https://jsfiddle.net/ds81vtrp/2/)

I need to align the "menu" div and the "content" div horizontally, so I use display: inline-block, but the result is wierd that the "content" div is placed at the right of the bottom children(i.e. the "menu2" div), not the parent(i.e. the "menu" div), why?

enter image description here

What I need:

enter image description here

realjin
  • 1,485
  • 1
  • 19
  • 38
  • 1
    Put your css, pls – s.kuznetsov Feb 01 '21 at 02:14
  • You should change your styling technique to something reliable like `flexbox` or `css-grid`. `Float` or `inline-block` are terrible for creating complex layouts. – tacoshy Feb 01 '21 at 02:20
  • Perhaps your css may contain a rule that does not allow you to fulfill `inline-block`. Therefore, you need to provide your css for full understanding. The more information you give, the faster and more correct you will get the correct answer. – s.kuznetsov Feb 01 '21 at 02:24
  • @s.kuznetsov so sorry that I missed it. – realjin Feb 01 '21 at 02:26
  • 1
    @realjin, Thanks for adding the css. You can solve your problem by adding `vertical-align: top;` to `.content`. Use the first solution to @HaoWu. – s.kuznetsov Feb 01 '21 at 02:29
  • @tacoshy Yes, I'm new to vanilla css(I use frameworks before and write little css tyles myself), I know flex works, I just want to know the mechanism and detail of inline-block, thanks so much! – realjin Feb 01 '21 at 02:38

2 Answers2

3

You need to assign them vertical-align: top

.container {
  border: solid 2px red;
}

.container > * {
  display: inline-block;
  vertical-align: top;
  border: solid 2px blue;
}
<div class="container">
  <div class="menu">
    <div class="menu-item">
      menu1
    </div>
    <div class="menu-item">
      menu2
    </div>
  </div>
  <div class="content">
    some content
  </div>
</div>

And FYI, it's a better practice to use flexbox here since you can get rid of the annoying whitespace between inline blocks, and also align them freely such as making the content occupy the rest of the space horizontally:

.container {
  display: flex;
  align-items: flex-start;
  border: solid 2px red;
}

.container > * {
  border: solid 2px blue;
}

.content {
  flex: 1;
}
<div class="container">
  <div class="menu">
    <div class="menu-item">
      menu1
    </div>
    <div class="menu-item">
      menu2
    </div>
  </div>
  <div class="content">
    some content
  </div>
</div>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
1

Try to use vertical-align

The vertical-align property sets the vertical alignment of an element.

and you may need: top

top– Align the top of the element and its descendants with the top of
the entire line.

vertical-align: top;

Alireza
  • 100,211
  • 27
  • 269
  • 172