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

Question

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

#wrapper{    
width:800px;
}

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

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

Я нашел

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

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

Answer 1

Это действительно общая проблема дизайна.Раньше я исправлял это, добавляя 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 здесь

Answer 2

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