CSS solves the problem of dislocation of inline block

Don’t talk much about post code

HTML section

< div class = "positionleft" > I am the left side of position mode, accounting for 30% < / div >
        < div class = "positionright" > I am the right side of position mode, accounting for 70% < / div >

CSS part

 .positionleft {
           position: relative;
           display: inline-block;
           background-color: #8d8d8d;
           width: 30%;
           height: 20%;

       }
       .positionright {
           position: relative;
           display: inline-block;
           left: 0;
           background-color: #ff8888;
           width: 70%;
           height: 20%;
       }

Display effect

It is obvious that the two div blocks are misplaced. When we look up the data, we find that there is a space in the middle of the two inline blocks

Modify the HTML code as follows

< div class = "positionleft" > I am the left side of position mode, accounting for 30% < / div > I am the right side of position mode, accounting for 70%
</div>

Just delete the space between the two divs. Let’s take a look at the effect
Display effect

Problem solving

You should pay attention to this problem when using document formatting tools such as prettier

summary

This article on CSS to solve the problem of inline block dislocation introduced here, more related CSS inline block dislocation content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!