Один список, простой поплавок слева, разные размеры ячеек - PullRequest
Новая
       6

Один список, простой поплавок слева, разные размеры ячеек

3 голосов
/ 25 марта 2011

У меня есть хороший вызов для вас. Здесь у вас есть следующий код (живой пример: http://inturnets.com/test/test.html):

    <!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
        margin: 0;
        padding: 0;}a, a:hover {
        text-decoration: none;
    }
    .grid {
        width: 984px;
        margin: 0 auto;
        list-style: none;
        height: 666px;
    }
    .grid li {
        float: left;
        position: relative;
    }
    .small + .small {
        position: relative;
        clear: left;
    }
    .large, .large a {
        width: 393px;
        height: 222px;
    }
    .small, .small a {
        width: 198px;
        height: 111px;
    }
    .small a, .large a {
        display: block;
        cursor: pointer;
        color: #fff;
    }
    .overlay {
        background: #000;
        width: 100%;
        height: 22px;
        color: #fff;
        opacity: 0;
        position: absolute;
        top: 0;
    }
    </style>
    </head>
    <body>

    <ul class="grid">
      <li class="item small"><a href="#" title="Title 1"><div class="overlay">Title 1</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 2"><div class="overlay">Title 2</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 3"><div class="overlay">Title 3</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 4"><div class="overlay">Title 4</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 5"><div class="overlay">Title 5</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
      <li class="item large"><a href="#" title="Title 6"><div class="overlay">Title 6</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 7"><div class="overlay">Title 7</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 8"><div class="overlay">Title 8</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 9"><div class="overlay">Title 9</div><img src="img/tree.png" border="0" width="393" height="222" /></a></li>
      <li class="item small"><a href="#" title="Title 10"><div class="overlay">Title 10</div><img src="img/squares.png" border="0" width="198" height="111" /></a></li>
      <li class="item small"><a href="#" title="Title 11"><div class="overlay">Title 11</div><img src="img/space.png" border="0" width="198" height="111" /></a></li>
      <li class="item large"><a href="#" title="Title 12"><div class="overlay">Title 12</div><img src="img/arch.png" border="0" width="393" height="222" /></a></li>
    </ul>
    </body>
    </html>

Задачи:

  • один список (ок)
  • Простое число с плавающей запятой: осталось для LI (ок)
  • выровнять ячейки, как на следующем рисунке (еще не сделано)

enter image description here

Советы:

  • как вы видите, у второго .small класса есть позиция относительно
  • вам не нужно ничего особенного на втором маленьком
  • тебе нужно заняться другими делами
  • , поэтому вам нужно вернуть предмет в правильное положение
  • и затем вам нужно исправить пустое пространство, которое оно оставляет

Ответы [ 3 ]

5 голосов
/ 25 марта 2011

@ хун, я попробую со своей стороны, может быть, это поможет вам: 

.small + .small {
        position: relative;
        margin-left:-198px;
        margin-top:111px
    }
4 голосов
/ 25 марта 2011

Я создал рабочую демонстрацию .

Я убрал ваши появившиеся div заголовков, немного сократил HTML и свел все к минимуму, поэтому окончательный CSS выглядит так: 

ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }

.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.large, .large a, .large img { width: 393px; height: 222px; }
.small, .small a, .small img { width: 198px; height: 111px; }
.item a { display: block; cursor: pointer; color: #fff; }

С этой базы, кажется, можно добавить эти div-ы и прочее.

Проверено только на Firefox, но я не вижу причины, по которой он не будет работать в других браузерах (скажите, если я не прав). Ну, кроме селектора +, но он был и в вашем оригинальном CSS.

4 голосов
/ 25 марта 2011

Я не уверен, как это сделать с помощью float.

Вот решение с использованием display: inline-block вместо.

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

Однако я не собираюсь пытаться это исправить, поскольку порядок изображений в вашей цели неправильный (или около того).Я думаю):

Ваш исходный код имеет: 

Image 6 - img/tree.png
Image 7 - img/squares.png
Image 8 - img/space.png

Но на вашей цели изображение space находится поверх squares, что не согласуется с другими экземплярами«два маленьких изображения».

Без лишних слов:

Изменения:

  • Я удалил пробел между тегами <li>. Вы можете обойти эту проблему.

  • Новый CSS: 

    .grid li {
    position: relative;
    display: inline-block;
    vertical-align: top;

    *display: inline;
    zoom: 1
}
.small + .small {
    position: relative;
    clear: left;
    top: 111px;
    margin-left: -198px
}
  • Я включил хаки, необходимые для работы display: inline-block вIE7.
  • Протестировано в IE7 / 8 и последних версиях: Chrome, Firefox, Safari, Opera.
...