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

Today, I'll show you how css makes several div not overlap. The content of the article is good. Now I would like to share it with you. Friends who feel in need can understand it. I hope it will be helpful to you. Let's read it along with the editor's ideas.

Css div does not stack repeatedly occlusion reason and solution css how to make several div do not stack, div do not stack, div and div do not block the title problem notice, manage the way to design the thought picture and text tutorial. CSS5 goes through three ways to figure out how to make div unoccluded and unstacked.

Peer DIV some use float and some do not use to form a DIV stack

Red DIV overlaps with gray set DIV

Let's look at the code.

Stack DIV.left {width:200px; float:left; color:#F00; border:1px solid # F00} .nofloat {width:100px; bac kg round:#CCC} left object DIV within nofloat object DIV

Screenshot of effectiveness

Two div overlapping occlusion representation

Second, cause analysis:

Class=left 's div box applies the floating property float:left, while class=nofloat does not. What a floating DIV and one that does not use the float floating property, so it constitutes an overlapping scenario.

Third, the path of governance:

1. Both use the float floating attribute

Configure the float property for .left and .nofloat to manage occlusion cascading. (expand to dabble in div side by side without line wrapping)

All peer div have float, so they can not be stacked and typeset.

2. Neither of them uses floating attributes.

Neither of the two div sets the float float, and plans to overlap the title.

Two div do not overlap

3. The first div sets the equipment float, and the second div sets the equipment margin attribute monopoly spacing so that it does not stack.

This method is also commonly used in layout, as long as the width is configured with float, and the margin property is set by div without float, and the spacing method is used to stagger the configuration float of div without setting float, so that the div does not overlap.

Control the distance between flaot float and margin to complete div stack occlusion

What is the full name of css? the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to express file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

This is how css makes several div do not overlap all the content, more and css how to make several div do not overlap related content can search the previous article or browse the following article to learn ha! I believe the editor will add more knowledge to you. I hope you can support it!

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.