Home >Web Front-end >HTML Tutorial >Display multiple div layers side by side in html_html/css_WEB-ITnose
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. . . .
Post the code~~
dc6dce4a544fdca2df29d5ac0ea9906b
dc6dce4a544fdca2df29d5ac0ea9906b1
16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b2
16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
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>
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