Home >Web Front-end >HTML Tutorial >Display multiple div layers side by side in html_html/css_WEB-ITnose
Display multiple div layers side by side in html_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:15:261799browse
There are three layers in the middle div layer of the page. 1,2,3
I want these three layers to be displayed side by side. It can be displayed in Firefox but the middle and back layers have fallen off in IE.
Ask the experts how to solve it. . . .
Reply to the discussion (solution)
Post the code~~
I want The three divs inside the outer div are displayed side by side, and as the browser size changes, the layers fall off. Please tell me why
No one can help me
<style type="text/css"><!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div> //Note: The sum of all widths of divs displayed side by side cannot be greater than the width of the parent div
The above code: The first line is too much, so remove it:
<!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>
Use a style sheet to control
You can also change the width to a percentage Control will automatically control the width of the div according to the size of the page~~
Thank you everyone, it was easy to fall off before because it was not in the same layer. Thank you. . .
DIV is adaptive to the width, it is not possible without adding floating code and width