CSS плавающие изображения, убрать поля в каждой строке - PullRequest
Новая
       34

CSS плавающие изображения, убрать поля в каждой строке

0 голосов
/ 06 декабря 2011

Я пытаюсь выровнять несколько изображений или DIV.Я получаю контент из WordPress. 

#wrapper{    
width:800px;
}

.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}

Это заставляет последнее изображение перейти к следующей строке.

Я нашел 

#wrapper div:first-child{
    margin-left:0px;
    }

помогает мне с первымлиния, но следующие строки снова «ломаются».Как выровнять 6 изображений подряд с ^ n Картинками?

Ответы [ 2 ]

3 голосов
/ 06 декабря 2011

Это действительно общая проблема дизайна.Раньше я исправлял это, добавляя 10px к контейнеру, но в настоящее время я всегда использую исправление jQuery: 

$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');

См. Jsfiddle здесь

Или вы можете сделать этоТолько CSS, но это будет работать только в реальных браузерах (не в <= IE8) </p> 

.image:nth-child(6n+1) {
    margin-left:0px;
}

См. Jsfiddle здесь

0 голосов
/ 06 декабря 2011

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

...