我的 HTML在下面.
<!DOCTYPE HTML><HTML><head><Title>Webpage Layout</Title><style>* {padding: 0px;}HTML {wIDth: 970px;margin: auto;}header,footer {wIDth: 100%;text-align: center;height: 10%;margin: 5px;border: 1px solID black;}section,nav,asIDe {text-align: center;padding: 0px;height: 80%;float: right;margin: 5px;border: 1px solID black;}section {wIDth: 480px;}nav,asIDe {wIDth: 218px;}</style></head><body><header><h1>header</h1></header><asIDe><h1>AsIDe</h1></asIDe><section><h1>Section</h1></section><nav><h1>Nav</h1></nav></body></HTML> 任何帮助将不胜感激
解决方法 我建议你使用flex,这个 article是flex CSS的良好开端.我做的是将内容包装到flex-div中,即body-container.然后我将该部分的flex-grow设置为2,并将nav设置为1.因此它将是1：2：1的比例
<!DOCTYPE HTML><HTML><head> <Title>Webpage Layout</Title> <style> * { padding: 0px; } HTML { wIDth: 970px; margin: auto; } .body-container { display: flex; } header,footer { text-align: center; height: 10%; margin: 5px; border: 1px solID black; } section,asIDe { text-align: center; margin: 5px; border: 1px solID black; } section { flex: 2 0 auto; } nav,asIDe { flex: 1 0 auto; } </style></head><body><header> <h1>header</h1></header><div > <asIDe> <h1>AsIDe</h1> </asIDe> <section> <h1>Section</h1> </section> <nav> <h1>Nav</h1> </nav></div></body></HTML> 总结 以上是内存溢出为你收集整理的html – 如何使元素排列到父元素的外边缘全部内容，希望文章能够帮你解决html – 如何使元素排列到父元素的外边缘所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）