水平和垂直并排有许多小div和一个大-div？ [英] Horizontal and Vertical Side-by-sides with many small divs and one Large -div?
问题描述
>
如何我创建这种结构？我的第一个想法是把四个粉红色的一个橙色，所以我得到4pinksVS1orange（现在的下一个谜题是把它们并排，我不知道，确定我知道一些hxck，但他们很容易破碎）。然后，那个谜题是底行有四个粉红色（再次是同一个side-by-side - 拼图）。为了清楚起见，假设 border：0 。我不想要任何float -hxck，也许 position：absolute - 对不起，我不知道肯定。下面你可以找到我如何尝试解决这种情况，但我相信有人可以拿出更聪明的想法。
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>
<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}
现在假设我想要一个中间有橙色框和周围的粉红色框的布局，使用后者的语法，它只是：
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.
推荐答案
没有黑客。纯CSS。 http://jsfiddle.net/blackpla9ue/9gUP8/
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;
}
这篇关于水平和垂直并排有许多小div和一个大-div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
