css float left合理布局换行不一切正常难题的处理

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

近期遇到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行了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。