问题

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.

回答1:

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

回答2:

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?

问题

回答1:

回答2:

jsbin demo