enter image description here 水平和垂直与许多小divs和一个大-div？

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

目标： REUSE！

的例子有布局

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

现在假设我想与橙色盒子布局在中部和粉红色框的周围，怎么样？对于后者，它只是：

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

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

来源

2012-03-04 hhh

答案显然[CSS3网格布局（http://dev.w3.org/csswg/css3-grid-align/），但它会只在一个浏览器中正确渲染，IE10（测试版，只有W8，市场份额为0.02％）:) – FelipeAls 2012-03-04 10:19:35

你能描述那些彩色盒子里的内容吗？它是否是同一类型内容的9倍，其中一个比另一个更大？根据我的经验，即使对于图像（它们可以被“@ alt”替换，并且长度可变），“高度”也没有。这就是为什么浮动“爆炸”，当1盒是1px高的原因或另一个......所以有什么内容？它应该由列表编码，列表如果可能的话，清单图像不用担心容器？ – FelipeAls 2012-03-04 10:25:58

@FelipeAlsacreations：不要担心内容，我担心的是*重用*。假设我需要稍微改变布局，或者我想每天自动生成布局有点不同。这些盒子每天都是相同的尺寸（或者如果真的需要，可以进行小尺寸的更改）。必须有一些工具来提供最终涵盖的高级功能，这些想法是否与预览文件有关？ – hhh 2012-03-04 10:40:28

选中此项。没有黑客。纯粹的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; 
}

来源

2012-03-04 10:16:16 blackpla9ue

我不知道你可以使用ul | li来代替div吗？任何想法是否有可能会忽略边界，并在某种程度上在高层声明每个盒子都必须在5px \ pm10px -proximity到其他盒子？当我尝试过这些时，我搞砸了单调的计算 - 以某种方式让它们变得很酷，例如在身体中使它们像“proximity：5 \ pm10px;”。 – hhh 2012-03-04 10:51:25

你的意思是保持每个盒子之间只有5px的差距吗？ – blackpla9ue 2012-03-04 11:04:49

靠近，我的意思是*大约* 5px \ pm10px。我并不担心它是否真的是0-15像素，类似的东西没问题 - 会使事情变得更简单，并且在不同的环境下可能更具可重用性。 – hhh 2012-03-04 11:30:38

在 '左' 只是分割你的模板和 '右'：

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>

来源

2012-03-04 10:31:52

...我总是搞乱边界和填充（他们只是一些线性关系到其他昏暗），有没有一些通用的工具说'每个盒子必须悬停10px或1％-of-XYZ彼此或在一些邻近'？而不是硬编码，找到一些在网站上放置多个小盒子和一个大盒子的通用方法会非常有用。 – hhh 2012-03-04 10:43:39

水平和垂直与许多小divs和一个大-div？

回答

jsbin demo

相关问题