How should I create this kind of structure? My first idea was to combine four pinks to one one orange so I get 4pinksVS1orange (now the next puzzle is to place them side-by-side which I do not know, ok I know some hxcks but they get broken easily). Then after that the puzzle is the bottom row with four pinks (again the same side-by-side -puzzle). Suppose border:0 for clarity. I do not want any float -hxck, perhaps position: absolute -- sorry I do not know for sure. Below you can find the way how I would try to solve the case but I am sure someone can come up with more clever ideas.

CSS

<!--vim: nowrap:-->
<style type="css">
#body{
        width:800px;
        border:0;
}
#yellow{
        width:400px;
}
<!--ERR: poor reuse? How better?-->
#pinkFour{
        width:400px;
        height:400px;
}
#pinkOne{
        width:100px;
        height:100px;
}
/* ERR: poor reuse? How's better? */
#concatenatePinkYellow{         
        width:800px;
        height:400px;
}
#pinkRow{
        width:800px;
        height:100px;
}
</style>

Body

<body>
        <div id="concatenatePinkYellow"> 
                <div id="pinkFour"> </div> 
                <!-- HORIZONTAL-VERTICAL SBS -->
                <div id="yellow"> </div>
        </div>
        <div id="pinkRow">
                <!--TODO: four pinks here-->
                <!--HORIZONTAL SBS-->
                <!--TODO: how to place them side-by-side?-->
        </div>
</body>

Goal: REUSE!

The example had layout

4x4{1x1}4x4{4x4};8x1{1x1}

now suppose I want a layout with orange box in the middle and pink boxes in the surrounding, how? With the latter -syntax, it is just:

8x8{1x1};2x1{1x1}2x2{2x2}2x1{1x1};8x8{1x1}

...it cannot be harder than that? Is there any tool to fast generate different geometries with syntax like above? For simplicity, do not care about the content in the box.

Check this. No hacks. Pure CSS. http://jsfiddle.net/blackpla9ue/9gUP8/

HTML

<ul>
    <li class="yellow"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul{
    width: 240px;
    padding: 5px;
}

li{
  width: 50px;
  height: 50px;
  display: block;
  background: pink;
  float: left;  
  margin: 5px;
}

li.yellow{
  width: 110px;
  height: 110px;
  background: yellow;
  float: right;
}

Just split your template in 'left' and 'right' :

jsbin demo

  #container{
    border:1px dashed #444;
    width:480px;
    height:360px;   
  }

  .left{
    width:240px;
    float:left;
  }
  .right{
    width:240px;
    float:left;
  }
  .pink{
    background:#FF2780;
    width:100px;
    height:100px;
    float:left;
    margin:10px;
  }

  .yellow{
    width:220px;
    height:220px;
    background:#FFC000;
    float:left;
    margin:10px;
  }

<div id="container">

  <div class="left">
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>  
 </div>

 <div class="right">
    <div class="yellow"></div>
    <div class="pink"></div>
    <div class="pink"></div>
  </div>

</div>

来源：https://stackoverflow.com/questions/9553950/horizontal-and-vertical-side-by-sides-with-many-small-divs-and-one-large-div

标签

css

html

reusability

Horizontal and Vertical Side-by-sides with many small divs and one Large -div?

jsbin demo