修復使用CSS花車本格（或其他方式）

Question

我想要實現使用花車該網格佈局（或其他方式）：

但我不能讓移動網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作爲單位，所以我會這樣做。 （這是我不得不刪除<li>之間的空格在HTML的原因。）

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; 
}