"Dry": how to make the elements horizontal?

Block-level elements are vertically arranged by default, while inline elements are arranged horizontally, while the layout is basically a block-level element, such as div and other commonly used block-level tags, then how to let the block-level elements are also arranged horizontally? I have 100 ways (exactly 100-94 kinds) to arrange the elements horizontally, do you know several of them?

The first type: Display:inline-block

You first need to understand block-level elements (blocks elements) and inline elements (inline elements) and inline block elements (inline-block elements)

　　　　block- level elements: block-level elements contain width height,padding,border and margin, they are arranged from top to bottom, common block-level elements have div,p,form,ul and so on, More block-level elements can be accessed on MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

　　　　Inline elements : The height and width are determined by the content, they cannot be set to a fixed size, there is no vertical margin and padding, the arrangement is arranged horizontally, the element in the line is the majority of all elements in the HTML, such as A,span,label,button, Img,input ... More inline elements or MDN lookup https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

There may be questions here: "Buttons and img and input tags can be set width and height can also set margin and padding, why does it actually inline elements?" In fact, there are two main types of HTML elements, namely "block-level elements and inline elements", "replace elements and non-replaceable elements." The first method of partitioning is described above, and the second way of partitioning is described below:

　　　　replacement elements : Popular understanding is the element with the width and height attributes. The replacement element is similar to the Display:block element, and you can set aspect and internal and external margins, mainly including IMG, input, textarea, select, Object,audio, and canvas to replace elements in certain situations. More official definition of https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

　　　　non-replaceable elements: the remainder of the replacement element is a non-replaceable element (O (∩_∩) o)

A lot of it, we know that display:inline-block can let elements in the horizontal arrangement, but this kind of layout may have a little bit of a problem, lift chestnuts:

<style>        Div{            display: Inline-block;    Width: 200px;    Height: 200px}. div1{background: Green}. div2{background: Red}</style ><div class = "Div1" > Left </div><div class = "Div2" > Right </div>     

This is where we find that there is a gap between the two Div, which is why?

The browser will handle line breaks, indents, and spaces as a single space, even if the secret love two spaces, or a newline plus a space, and so on will be resolved into a space to use. The size of this space is the FONT-SIZE/2 size. There are many ways to remove this void.

1. Setting the Div2 MARGIN-LEFT:-FONT-SIZE/2

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

3. Set the negative word-spacing

And so there are many ways, here is just a point, specific details can see Zhang Xin Xu this blog, the study is very detailed. http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

The second type: float:left/right

The Float property allows elements to be separated from the regular document flow and arranged horizontally along the left or right side of the container.

This can be said to be the most used, but there is a problem, in the adaptive layout is generally not fixed elements of the high-width, depending on the size of the content to automatically adjust, if the child elements are floating elements, there will be a high collapse.

Lifting chestnuts

<style>        span{            float: left;        Width: 200px;    Height: 200px}. box1{background: Green}. box2{background: Red}</style> <div> <span class = "Box1" > left </span> <span class = "Box2" > Right </span></div> 

In this case, the last pest sub-element DIV was deliberately changed to span, in fact, to express that float can be implicitly converted to block elements (Position:absolute/fixed also), so it is natural to set the width and height.

So what's the problem with the box being arranged horizontally? That's right! The parent container is highly collapsed. At this point the parent container Div has a height of 0, because the floating element is detached from the regular document flow, and its parent container ignores it when it calculates the height. This is what we do not want to see, because this highly collapsed div behind if there are other regular flow tags, then the page will be confused and so do not want to see the results.

The solution is naturally to clear the float, mainly in two ways to clear the float:

1.clear:left/right/both, specifically used to clear the floating CSS.

2.BFC, because BFC has a rule " floating elements also participate in calculations when calculating the height of BFC ."

　　Say a few ways to clear the float with clear:

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

2. In the last floating child element, use the pseudo element:: After, add clear style to clear float

　　Resolving height collapses by BFC:

Create a BFC (excerpt from MDN) for the parent element, as long as any of the following will be created for the element BFC.

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

• The root element or something that contains it
• Floats (elements where is not   float none )
• Absolutely positioned elements (elements where position is absolute or fixed )
• Inline-blocks (Elements with display : inline-block )
• Table cells (elements display : table-cell with, which are the default for HTML table cells)
• Table Captions (elements display : table-caption with, which are the default for HTML table captions)
• Elements where have overflow a value other thanvisible
• Flex boxes (elements with display : flex or inline-flex )

My English is not good, the above English can also understand, so it does not need translation, it is recommended to try.

Third Type: Table layout

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

　　　　· Slower rendering speed

　　　　· Increase the amount of HTML code, difficult to maintain

　　　　· The name of the label does not conform to HTML semantics, table is used to do the table, it is inappropriate to layout

　　　　· The label structure is more dead, the later modification cost is higher

Wait, there's not much elaboration here. In short, try to use table layout

Fourth type: absolute positioning

This way of daily development with more, the previous mention of float can let elements out of the regular document flow, here Position:absolute/fixed also has the same effect, the processing method in the float layout has been mentioned, here to move.

Here's the position:absolute. Absolute positioning, with its first parent and the element positioned as Position:absolute/relative/fixed, is positioned as a base point, and if it is not found, it is positioned as the root element. It is generally used in conjunction with the parent element position:ralative, the child element Position:absolute.

Fifth: CSS3 's flexible layout

HTML5 new features, because its function is too strong, compatibility is too poor, I can not control it now, so did not dare to caught dead, but W3cplus has an article written very well, interested in reading http://www.w3cplus.com/css3/using-flexbox-today.html.

Flexible layout because of its compatibility so has not been widely recognized, but I think it will definitely be the leader, as I am optimistic about HTML video player, sooner or later will be dry flash, just a matter of time!!!

Sixth type: Transform:translate

CSS3 is used for animation in a style, but he let two elements in the horizontal arrangement, here not much to say directly on the code, please use Google browser run:

<style>Div{width:200px;Height:200px;        }. Box1{background:Green;        }. Box2{Transform:TranslateX (200px) Translatey ( -200px);background:Red;        }    </style>

< Div >    <    = "Box1" > left </div > <         = "Box2" > right </div >   </ Div >

The effect is the same as in the previous ways.

The above is what I said to share six ways to achieve horizontal layout, in fact, there are a lot of brainiac in each way, I explained the tip of the iceberg, and not too much to consider browser compatibility, but still hope to help you.

If there is an error, please correct me,

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

Thank

"Dry": how to make the elements horizontal?