Why did inline-block change lines instead of alignment?

want to arrange div horizontally with different heights from left to right

then I set the display:inline-block, for the two div. It is strange that the div on the right has changed the line. The two div should be aligned at the top. I wonder why?

HTML 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="left">
    

  </div>
  <div class="right">
    

  </div>
</body>
</html>

CSS 

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.left{
  display:inline-block;
  width:160px;
}
.right{
  display:inline-block;
  margin-left:180px;
}

actual effect

online demo

this simple little problem

Html5 css
May.10,2021
The default width of

inline-block is auto, which means that the width widens as the content increases and wraps lines with the width of the browser.

so in this example, right needs to set the width. If you don't set the width, it will stretch out according to the content. If the content is not enough, there is still one line. If the content is enough, it will occupy 100% of the width. At that time, the line will be changed

. 
*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    .left{
      display:inline-block;
      width:160px;
    }
    .right{
      display:inline-block;
      width: calc(100% - 180px);
      padding-left: 20px;
    }
    .left, .right{
      vertical-align: text-top;
    }
width Ah, your second P tag sets a width

because you have a p-block element inside, and you add a margin-left:180px; line that won't fit, so you must have a new line. Try deleting margin-left to reduce the contents of the second p. The simplest one is not written as inline-block; , but directly floats on the left and floats on the right

.

Previous: Domain name resolution is suspended, and only half of the page is displayed after reply?

Next: How to realize that a large amount of data is sent by api, and then the returned fields are written to the local database?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu