jsbin demo 的

Question

enter image description here

我应该如何创建这种结构？我的第一个想法是将四个粉红色组合成一个橙色，所以我得到4pinksVS1orange（现在下一个谜题是将它们并排放置，我不知道，好吧我知道一些hxcks但它们很容易被打破）。然后，拼图是底部的四个粉红色（同样是并排的 - 喷嘴）。假设border:0为清晰起见。我不想要任何浮动-hxck，也许是position: absolute - 抱歉我不确定。下面你可以找到我试图解决案件的方式，但我相信有人可以提出更聪明的想法。

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

目标：重播！

示例有布局

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

现在假设我想要一个中间带橙色框的布局和周围的粉红色框，怎么样？对于后者-syntax，它只是：

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

......它不能比那更难吗？是否有任何工具可以使用上面的语法快速生成不同的几何图形？为简单起见，不要关心框中的内容。

Answer 1

检查一下。没有黑客。纯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;
}

Answer 2

只需将模板拆分为“左”和“右”：

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>

水平和垂直并排有许多小div和一个Large -div？

2 个答案:

jsbin demo 的