Home >Web Front-end >HTML Tutorial >div height adaptive problem_html/css_WEB-ITnose
div height adaptive problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:00954browse
fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
080b747a20f9163200dd0a7d304ba388
.main_all{border:1px solid red; width:1200px;margin: 0 auto;}
.page{border:1px solid blue;width:1200px;float:left;height:40px;line-height:40px;text-align:center;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
1b751c4d0e3236909573e653cf0fa16e
5f871ad60a5f0c1deaa29fbfd1710c51dsadas95f0859cf0e4736c2c5259dbd8b52e83
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e Increasing, how to achieve such self-increasing
Reply to the discussion (solution)
And I changed the float:left; in the page to margin : 0 auto; can be in main_all. This is the code I picked out from my page. When I don’t replace float:left; in the page with margin: 0 auto;, the css of the attachment will also become invalid.
Remove float:left;. You call this float collapse, or clearing the float.
56c5d33419803948326578624852419716b28748ea4df4d9c2150843fecfba68
<!DOCTYPE HTML><html><head> <style type="text/css">.main_all{border:1px solid red;width:1200px;margin: 0 auto;}.page{border:1px solid blue;width:1200px;float:left;height:40px;line-height:40px;text-align:center;}</style></head><body><div class="main_all"><div class="page">dsadas</div><div style="clear:both;"></div> </div> </body></html> Commonly used methods to clear floats
Thank you, God! ! ! !