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

This article mainly explains the "DIV line-breaking and DIV line-breaking method". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of DIV line-breaking and DIV line-breaking".

The default width of the DIV box is 100% width exclusive to line breaks:

When the DIV box is not assigned a CSS style, the default DIV box is an exclusive row (100% width).

The following default HTML code:

Div instance www.dvicss5.com first div second box

A screenshot of an exclusive row of div boxes

Two div object boxes occupy one line, forming a screenshot of the layout effect of automatic line wrapping.

From the above DIV case, we can observe that DIV does occupy 100% of the width of a row by default.

How to keep DIV side by side without changing lines?

1. Set float to div

2. Set the display style for div

First, set the float floating style for div

Setting the float:left style for div is equivalent to letting the div object to the left, naturally losing its own width style.

Let DIV+CSS implement DIV side by side without wrapping the instance code:

Untitled document div {float:left} first div box second div box

Description: we set float:left for div

Screenshot of the effect of the example:

Use the css floating style to make div lose its default 100% width

Second, set display side-by-side style for div

Div also loses the default width of a 100% exclusive row by styling div with display:inline.

Display:inline means to have objects displayed side by side.

1. Example HTML source code:

Div side-by-side instance www.dvicss5.com div {display:inline} first div box second div box

2. Achieve screenshot of div effect without line wrapping

Thank you for your reading, the above is the content of "the method of DIV and DIV line-breaking". After the study of this article, I believe you have a deeper understanding of the method of DIV line-breaking and DIV line-breaking, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.