плавать Лил немного поверх другого

enter image description here плавать Лил немного поверх другого

Привет,

Я пытаюсь создать столбцы с альбомом изображением и некоторой информацией. Я хочу, чтобы информация накладывалась на бит litle на изображении рядом с ним. Нравится на этом изображении:

Однако либо я ломаю плавающий левый, либо текст получаю итог поверх изображения и т. Д. И т. Д. Как и все, кроме желаемого результата.

Некоторые помощь будет здорово, вот jsfiddle:

http://jsfiddle.net/Scf4u/

небольшой кусок кода:

<div class="entrie"> 
       <img class="entrieImage" src="http://doekewartena.nl/temp/images/img02.png"/> 

       <div class="entrieInfo"> 
        <div class="band">Kids for Cash</div> 
        <div class="album">No More Walls E.P.</div> 
        <div class="label">...</div> 
        <div class="year">1986</div> 
        <p>-</p> 
        <div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz 
        </div> 
       </div> 

      </div>

CSS:

.entrie { 
    float: left; 
} 

.entrieInfo { 
    width: 200px; 
    float: left; 
    margin-left: 10px; 

} 

.entrieImage { 
    /* if you only set the width then the height will be set automaticly proportional*/ 
    width: 300px; 
    float: left; 
}

источник

2012-06-27 clankill3r

http://jsfiddle.net/Scf4u/1/

#entries .entrie:nth-of-type(2n) { 
      margin-left: -41px; 
      position: relative; 
      z-index: -1; 
     }

Должен брать каждую секунду .entries div и устанавливать отрицательный запас слева, а z-индекс должен находиться под предыдущим div. Возможно, я перепутал свой псевдоселектор.

источник

2012-06-27 20:50:34

У вас будет проблема в более старых версиях IE с этим псевдоселектором. Просто не уверен, что у вас будет больше двух .entrie divs:} В противном случае вы можете добавить второй/семантический класс ко второму div entrie и использовать его как селектор. –

может быть намного больше, чем только 2 предмета, и он будет откладываться на широком экране. Это может быть 3x2 или 3x8 и т. Д. Atm ваше решение выравнивается очень плохо во 2-й строке. – clankill3r

Является ли контент динамическим? Если нет, вы можете добавить класс .second и использовать те же стили. –

Положить margin-right: -30px; на .enterieInfo.

Удар Кристофером Маршаллом. Либо или должен работать.

источник

2012-06-27 20:52:19 smdrager

ваш метод работает лучше с aligment. Я только не могу получить z-index done http://jsfiddle.net/Scf4u/2/ – clankill3r

плавать Лил немного поверх другого

ответ

Смежные вопросы