Question

我想使用浮点数（或其他方法）实现此网格布局： enter image description here

但是我无法移动第8号网格（按照自然顺序从左到右排列）以占据其在左侧的位置。 HTML：

<div class="blockContainer">

                    <ul id="RnP" class=" rnp">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li id="bigbox">6</li>
                        <li >7</li>
                        <li >8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                    </ul>
                </div>

CSS：

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp li{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    float: left;
    padding: 0;
    list-style: none;
}
#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}

JS FIDDLE：http://jsfiddle.net/ebbj2sch/

Answer 1

我认为您使用的标记不可能。也许使用flexbox，但更简单的方法是在一个额外元素中将大框旁边的框包装起来。

<div class="blockContainer">
    <div id="RnP" class=" rnp">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
        <div id="bigbox">7</div>
        <div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
    </div>
</div>

将CSS更改为：

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp .box{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    padding: 0;
    list-style: none;
}

.rnp > div{
    float: left;
}

#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}

Answer 2

此Fiddle

中的工作解决方案

这不是最佳解决方案，但它可能对您有用。我假设你的布局是固定的（盒子数量，订单等等）。

另外：在你的小提琴中，你使用em作为单位，所以我也会这样做。（这就是我必须删除HTML中<li>之间的空格的原因。）

<强> HTML

<div>
    <ul>
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li id="Big">6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
    </ul>
</div>

<强> CSS

* {
    margin: 0;
    padding: 0;
}
div{
    border: 1px solid red;
    width: 37em;
}
ul
{
    position: relative;
    list-style: none;
}
li {
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    display: inline-block;
    margin-left: 1em;
    margin-top: 1em;
}
#Big
{
    width: 17em;
    height: 17em;
}
#Big + li + li
{
    position: absolute;
    top: 18em;
    left: 0;
}
#Big + li + li + li
{
    position: absolute;
    top: 18em;
    left: 27em;
}

使用CSS Floats（或其他方法）修复此网格

2 个答案: