【问题标题】：Horizontal and Vertical Side-by-sides with many small divs and one Large -div?水平和垂直并排与许多小 div 和一个大 -div？
【发布时间】：2012-03-22 04:12:33
【问题描述】：

我应该如何创建这种结构？我的第一个想法是将四个粉红色组合成一个橙色，所以我得到 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}

现在假设我想要一个布局，中间有橙色框，周围有粉色框，如何？使用后者 - 语法，它只是：

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

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

【问题讨论】：

答案显然是CSS3 Grid Layout，但它只能在一个浏览器上正确呈现，IE10（测试版，仅限 W8，市场份额 0.02%）:)
您能描述一下这些彩色框中的内容吗？是不是同一类型内容的 9 倍，一个比另一个大？根据我的经验，没有height 这样的东西，即使是图像（它们可以被@alt 替换，并且它具有可变长度）；这就是为什么当 1 个盒子由于某种原因高 1px 时浮动“爆炸”的原因……那是什么内容？是否应该使用列表、列表（如果可能）、纯图像而不用担心容器来编码？
@FelipeAlsacreations：不用担心内容，我担心的是重用。假设我需要稍微更改布局，或者我想为每一天自动生成布局有点不同。这些盒子每天都是相同的尺寸（或者如果真的需要，可以做小的尺寸变化）。必须有一些工具来提供最后介绍的高级功能，预览论文是否与此有关？

标签： css html reusability

【解决方案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;
}

【讨论】：

我不知道你可以像这样使用ul|li来替换div？知道是否可以省略边距并以某种方式在高层声明每个框都必须与其他框接近 5px\pm10px？当我尝试这样做时，我搞砸了单调的计算 - 以某种方式让它们像 proximity: 5\pm10px; 一样很酷。
你的意思是每个框之间只保留 5px 的间隙是吗？
通过接近度，我的意思是大约大约 5px\pm10px。我不担心它是否真的是 0-15px，这样的东西很好 - 会让事情变得更简单，并且可能在不同的上下文中更可重用。
+1 但你们做得很好，感谢您的回答。我将自己进一步研究这个问题，也许下次用更准确的例子来澄清这个问题。
很高兴这对你有帮助，伙计 :) 让我知道是否还有更多

【解决方案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>

【讨论】：

...我总是搞乱边框和填充（它们只是与其他暗淡的某种线性关系），是否有一些通用工具可以说every box must hover 10px or 1%-of-XYZ from each other or in some proximity？与其硬编码，不如找到一些通用的方法在网站上放置许多小盒子，然后放置一个大盒子。