Shulou(Shulou.com)05/31 Report--

This article mainly introduces "html5 div line can put two?" In daily operation, I believe many people have doubts about html5 div line can put two?, Xiaobian consulted all kinds of information, sorted out simple and easy to use operation methods, I hope to answer everyone's doubts about "html5 div line can put two?" Next, please follow the small series to learn together!

By default, html5 div elements can't have two in a row. div is a block-level element, one element will occupy a line, two div default can not be displayed in the same line; but you can add a div element "display: inline;" style, turn it into an inline element, you can achieve multiple div in the same line display.

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

By default, html5 div elements can't have two in a row.

A div is a block-level element, and one element occupies a single line; therefore, by default, two divs cannot be displayed on the same line.

The main characteristic of block-level elements is that they have their own row

The main characteristics of block-level elements are as follows:

Regardless of whether or not you use newline labels

Block level elements always start on new lines.

The width, height, margin and padding of block-level elements can be controlled;

If the width of a block-level element is omitted, its width defaults to the width of the current browser window;

Block level elements can contain other inline elements and block level elements.

However, you can use the display attribute to turn block-level elements into inline elements, so that multiple divs can be displayed on the same line.

The main characteristics of inline elements are as follows:

Inline elements and other elements are displayed on the same line;

The width, height, margin and padding of in-line elements cannot be changed;

The width of an element in a row is the width of its content and cannot be changed.

Only text or other inline elements can fit inside an inline element.

Block level elements are converted into inline elements

Setting display: inline; in a block-level element makes it inline.

Examples:

div{background-color: #FFC0CB;margin: 10px;}.box {display: inline;} A div element, a block-level element A div element, a block-level element A div element, converted to an inline element A div element, converted to an inline element

At this point, the study of "html5 div line can put two" is over, I hope to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.