Shulou(Shulou.com)06/02 Report--

This article will explain in detail what is the layout of inline-block in CSS, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

CSS layout-inline-block layout

In fact, the layout is to figure out how to arrange some elements horizontally, which will automatically occupy a row due to the existence of block-level elements.

Inline-block elements occupy a row and can adjust the width and height. It is ideal for arranging these elements in a row, and using inline-block element arrangement does not clear the problem of floats.

However, there is a gap between the two elements when you use inline-block layout, so let's take a look at it.

Html code

Left right

Css code

.container {width: 800px; height: 200px.left {/ * font-size: 14pxorientation / background-color: red; display: inline-block; width: 200px; height: 200px.right {/ * font-size: 14pxscape / background-color: blue; display: inline-block; width: 600px; height: 200px;}

The results are as follows:

According to reason, the width of container is exactly equal to the sum of the widths of left and right, and it should be juxtaposed, but no. Now let's reduce the width of some right and set the width of right to 500px. The result is as follows

You will find a blank gap in the middle. Why?

Because the inline-block element is used now, in order to make it easy to understand, the inline-block element can be regarded as two words, text and text can not be connected together, there must be a gap.

Now that we know that it is the text problem, we will set the font size of the parent element container to 0, but at this time we will find that the words left and right are gone, because the left and right elements inherit the font size of the parent element, so we only need to set the font size of the left and right elements respectively.

Modify the css code as follows

.container {width: 800px; height: 200px; font-size: 0; / * add * /}. Left {font-size: 14px; / * add * / background-color: red; display: inline-block; width: 200px; height: 200px;} .right {font-size: 14px; / * add * / background-color: blue; display: inline-block; width: 600px; height: 200px;}

The results are as follows

Here is a way to solve this problem from the perspective of html code.

The root cause of the above gap is that there is a gap between the left element and the right element code, which is not adjacent to each other, so you can change the html code like this:

What is the full name of left right left right css? the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to express file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

About what the inline-block layout in CSS is shared here, I hope the above content can be of some help to you, you can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.