Отображение: переполнение текста внутри блока, приводящее к проблеме выравнивания

Question

У меня есть эта проблема, которая всегда возникает, когда я использую display: inline-block для отображения div в строке один за другим.Что происходит, когда текст больше, чем div, и ему нужно перейти на новую строку, позиция / выравнивание следующего div-кода как бы с отступом.Я искал Overflow и не могу найти ничего, что соответствует этой проблеме.

Я включил HTML, CSS и ссылку на соответствующую страницу.

Я использую PHP какхорошо.

http://www.carbondelight.co.uk/gallery.php

#g-con { 
    width: 960px;   min-height:300px;

}

#g-con img{
    float:left;
    border: solid 3px #fff;
    -webkit-box-shadow: 0 0 5px #242424;
    box-shadow: 0 0 5px #242424;
}

.giiCon {
        background-image:url(../assets/images/giiCon_bg.jpg);
    background-repeat:repeat-x;
    margin: 10px;
    width: 270px;
    height: 106px;
    display:inline-block;
    border-radius: 0 5px 5px 0;
    -webkit-box-shadow: 0 0 5px #242424;
    box-shadow: 0 0 5px #242424;
}

HTML

<p class='textshadow'>Please take a look at our gallery of parts.</p>

<div id='g-con'>

for ( $j = 0 ; $j < $rows ; ++$j )
{
    $row = mysql_fetch_row($result);

    $sql2 = "SELECT name,price,carID,categoryID FROM partTable WHERE partID='$row[5]'";

    $result2 = performQuery($sql2);

<div class='giiCon'><img src='$image$row[1]' /><p>$result2[0]</p><br /><p>hello</p>        
</div>
}

Answer 1

http://jsfiddle.net/pH4KY/ - это проблема, которую вы упоминаете? Если это так, то это никак не связано с количеством строк. Это связано с тем, что браузер вставляет пробел после каждого элемента inline-block, если в исходном коде есть пробел.

Итак, есть два решения:

1. Удаление пробелов между inline-block элементами, как в http://jsfiddle.net/pH4KY/1/
2. Добавьте margin-right: -0.3em к каждому. Как здесь: http://jsfiddle.net/pH4KY/7/

Кроме того, рассмотрите возможность объявления inline-block элементов так, как понимает каждый браузер: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/