我应该如何创建这种结构？我的第一个想法是将四个粉红色组合成一个橙色，这样我就得到了 4pinksVS1orange（现在下一个难题是将它们并排放置，我不知道，好吧，我知道一些 hxcks，但它们很容易被打破）。然后，拼图是底行有四个粉红色的拼图（同样是并排拼图）。认为border:0为了清楚起见。也许我不想要任何浮动 -hxckposition: 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
<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!
该示例有布局
4x4{1x1}4x4{4x4};8x1{1x1}
现在假设我想要一个中间有橙色框、周围有粉色框的布局，怎么样？对于后一个 - 语法，它只是：
8x8{1x1};2x1{1x1}2x2{2x2}2x1{1x1};8x8{1x1}
……不可能比这更难吧？有没有任何工具可以使用上述语法快速生成不同的几何图形？为了简单起见，不要关心框中的内容。
检查一下。没有黑客。纯CSS。http://jsfiddle.net/blackpla9ue/9gUP8/ 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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
