*新闻详情页*/>
近期遇到1个网页页面合理布局上的难题,后来仿真模拟了1下复原了下出現的缘故。原本大约想完成的合理布局大约是这样的
結果出現了这样的状况
网页页面的html是这样的
<div class="block"> <div></div> </div> <div class="block"> <div></div> </div> <div class="block"> <div></div> </div> <div class="block" > <div id="special"></div> </div> <div class="block"> <div></div> </div> <div class="block"> <div></div> </div>
css
.block { width: 25%; padding: 10px; float: left; box-sizing: border-box; } .block div { background-color: pink; width: 100%; height: 280px; } #special { height: 280px; background-color: green; }
这样的编码合理布局如最初的图是一切正常的,但当special的height小于280px时就会变得不一切正常。
随后去看了下float的界定:波动的框能够向左或向右挪动,直至它的外边沿碰到包括框或另外一个波动的边框为止。
也便是原本第2行的想float到左侧,随后碰到了第3块,随后就停下了。第2行后边的就被挤到第3行了。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 (网站地图) 粤ICP备10235580号