Home/ Questions/Q 7588505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:56:13+00:00

How should I create this kind of structure? My first idea was to combine

  • 0

enter image description here

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

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

The example had layout

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0