Горизонтальный и вертикальный бок о бок со многими маленькими div и одним Large -div? - PullRequest
Новая
       2

Горизонтальный и вертикальный бок о бок со многими маленькими div и одним Large -div?

3 голосов
/ 04 марта 2012

enter image description here

Как мне создать такую ​​структуру? Моя первая идея состояла в том, чтобы объединить четыре гвоздики в один апельсин, чтобы я получил 4pinksVS1orange (теперь следующая загадка - разместить их рядом, чего я не знаю, хорошо, я знаю некоторые хкски, но они легко ломаются). Тогда после этого загадка - нижний ряд с четырьмя гвоздиками (снова та же самая рядом-головоломка). Предположим border:0 для ясности. Я не хочу никаких float -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 

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

... это не может быть сложнее, чем это? Есть ли инструмент для быстрой генерации различных геометрий с синтаксисом, как указано выше? Для простоты плевать на содержимое в коробке.

Ответы [ 2 ]

4 голосов
/ 04 марта 2012

Проверьте это. Нет хаков. Чистый 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;
}
1 голос
/ 04 марта 2012

Просто разделите ваш шаблон на 'left' и 'right':

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