div horizontal arrangement _css How to make multiple div boxes show side-by peer

how to make multiple div boxes walk side -by Div Horizontal arrangement show it?

We first set up 3 div box objects, and what CSS styles do not set a look at the effect. The code is as follows:

Three div boxes are displayed exclusively on one line

The default Style property of the Div box itself is exclusive, and there are usually two ways to resolve a Div exclusive line, one to set floats, and another to set the display style. Next for everyone through the article + Picture + case method to solve the div box objects side-by lateral arrangement and peer display method.

One, using CSS float side-by display

We can set a float floating property on the div to resolve the side-by, as long as your side div box total width is less than or equal to the outermost box width, you can implement multiple Div objects side-by-side display.

Add float float to implement multiple div side-by display

Here we set a floating div pass, of course, when the actual use, to display the Div object to join the CSS class, we have to peer display CSS selector set floating. Avoid other settings that are not required to be added to the floating style.

Second, using CSS display peers show

We join Display:inline to resolve the Div box object that the peer side of the implementation will display.
Display style effect is not set:

Div box is not displayed side-by

Set the div{Display:inline} style to the div tag, after resolving:

Use display styles to show your peers side by side with div boxes

In order to distinguish between other objects that do not need to be set horizontally to display div boxes, we have a uniform bold CSS class for the Div box adjacent to the same row display, and the CSS is named ". Div-inline".

The CSS code is as follows:

1. . div-inline{Display:inline}

HTML code snippet:

1. <div class="Div-inline"> First div box </div>
2. <div class="Div-inline"> Second box </div>
3. <div class="Div-inline"> Third box </div>

Effect:

Display-side displays with display

Iii. Summary-TOP

Whether float or display is implemented side-by-side, to display the first total width to be less than or equal to the ancestor width of the object, in order to display the horizontal arrangement layout.

Extended reading:
1, CSS to resolve the page dislocation
2. Webpage garbled reason
3. CSS Failure Reason resolution
4. Div Two column-row two-column div layout

Article origin and Source URL: http://www.divcss5.com/wenji/w472.shtml

div horizontal arrangement _css How to make multiple div boxes show side-by peer