[Dry goods]: How to arrange elements horizontally?

[Dry goods]: How to arrange elements horizontally? By default, block-level elements are vertically arranged, while in-row elements are horizontally arranged. In the layout, block-level elements, such as p, are basically used, so how can we arrange block-level elements horizontally? I have 100 ways (to 94) to arrange elements horizontally. How many ways do you know?

First: display: inline-block

First, you must first understand block-level elements and inline elements)

　　　　Block-level elements: Block-level elements include width height, padding, border, and margin. They are arranged from top to bottom. Common block-level elements include p, p, form, ul, etc, for more block-level elements, go to the MDN for https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

　　　　Line Element: The height and width are determined by the content, and they cannot be set to a fixed size. There is no vertical margin or padding. The arrangement is horizontal, and all elements in the row occupy the majority of html elements, for example, a, span, label, button, img, input ...... for more in-row elements or MDN refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Some people may have doubts here: "The button, img, input, and other labels can set width and height or margin and padding. Why is it true that it is a Row Element ?" In fact, there are two main ways to divide html elements: "block-level elements and intra-row elements" and "replacement elements and non-replaceable elements ". The first division method is described above. The second division method is described below:

　　　　Replacement element: In general, it is an element with the width and height attributes. The replacement element is similar to the display: inline-block element. You can set the height, width, and internal and external margins, including img, input, textarea, select, object, audio and canvas are replacement elements in certain situations. More official definition https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

　　　　Element not replaceable: Except for the replacement element, the remaining elements are non-replaceable elements (O (∩ _ ∩) O)

We know that display: inline-block can arrange elements horizontally, but this layout may have a small problem. For example:

Left
Right side

We found a gap between two p. Why?

The browser will treat line breaks, indentions, and spaces as a space, even if two spaces are in a crush, or a line break with a space, and so on, it will be parsed into a space. The space size is font-size/2. There are many ways to remove this gap.

1. Set the margin-left:-font-size/2 of p2.

2. Set the font-size of the parent tag of two p: 0

3. Set negative word-spacing

There are still many ways to do this. Here we will only discuss the issue. For details, let's take a look at Zhang xinxu's blog. The research is very meticulous. Http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

Type 2: float: left/right

The float attribute allows elements to flow horizontally along the left or right of the container from a regular document stream.

This method can be said to be the most widely used, but there is a problem. In adaptive layout, the height and width of elements are not fixed and will be automatically adjusted according to the content size, if the child element is a floating element, the height will collapse.

Chestnut

Right on the left

Here, the sub-element p in the previous Chestnut is intentionally changed to span. In fact, to express float, the element can be implicitly converted to a block element (position: absolute/fixed ), therefore, you can set the width and height.

What problems does the box have after horizontal arrangement? That's right! Parent container height collapsed. In this case, the height of the parent container p is 0, because the floating element is out of the conventional document stream, and its parent container ignores it when calculating the height. This is what we don't want to see, because if there are other regular flow labels behind the DIV with the height of collapse, the page will be out of order and will not be seen.

The solution is to clear the float in two ways:

1. clear: left/right/both, which is used to clear floating CSS.

2. BFC, because BFC has a rule"When calculating the BFC height, floating elements are also involved in calculation.".

　　Here are several methods to clear floating with clear:

1. Add an empty label next to the last child element and set its style clear: both.

2. In the last floating sub-element, use the pseudo element: after to add the clear style to clear the floating

　　Solve high collapse through BFC:

Create a BFC for the parent element (from MDN). If any of the following conditions is met, a BFC is created for the element.

A block formatting context is created by one of the following:

• The root element or something that contains it
• Floats (elements where floatIs notnone)
• Absolutely positioned elements (elements wherepositionIsabsoluteOrfixed)
• Inline-blocks (elementsdisplay: inline-block)
• Table cells (elementsdisplay: table-cell, Which is the default for HTML table cells)
• Table captions (elementsdisplay: table-caption, Which is the default for HTML table captions)
• Elements whereoverflowHas a value othervisible
• Flex boxes (elementsdisplay: flexOrinline-flex)

I am not good at English and can understand the English above, so it does not need to be translated. It is recommended that you give it a try.

Third: table layout

This layout method is not commonly used because it has various problems.

　　　　·Low rendering speed

　　　　·Increase the amount of html code, making it difficult to maintain

　　　　·The tag name does not conform to the html semantics. The table is used for tables, and layout is very inappropriate.

　　　　·The label structure is dead, and the modification cost is high later.

And so on. In short, try to use table layout

Fourth: absolute positioning

This method is also widely used in daily development. As mentioned above, float can break elements out of the conventional Document Stream. position: absolute/fixed has the same effect here, the solution has been mentioned in the float layout. Just move it here.

Here we will talk about the absolute position of position: absolute, which is located on the basis of its first parent-level position: absolute/relative/fixed and other flying static positioning elements, if no value is found, the root element is used as the benchmark for locating. Generally, the parent element position: ralative is used in combination with the sub-element position: absolute.

Category 5: css3 elastic Layout

Html5's new features are so powerful and have poor compatibility that I cannot control them now, so I did not dare to look ugly, but w3cplus has a good article, for more information, see http://www.w3cplus.com/css3/using-flexbox-today.html.

Flexible layout is not widely recognized because of its compatibility. However, I think it will certainly be the first choice in the future. Like the video players I like html, it will be defeated in the morning and evening, it's just a matter of time !!!

Type 6: transform: translate

A style used for animation in CSS3, but it allows two elements to be arranged horizontally. The code is not directly mentioned here. Please run it in Google Browser:

    
Left
    
Right side

The effect is the same as that of the previous methods.

The above are the six ways to achieve horizontal layout. In fact, there are many university questions in each method. I have explained the tip of the iceberg and have not considered the compatibility of browsers too much, but I still hope it will help you.

If any error occurs, correct it,

If you have other methods, please leave a message to add

Thanks