Question

当我使用display: inline-block逐行显示div时，我总会遇到这个问题。当文本大于div并且必须转到新行时，下面的div的位置/对齐是缩进的。我搜索了溢出，我找不到任何与此问题相符的内容。

我已经包含了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元素后插入一个空格。

所以，有两种解决方案：

删除inline-block元素之间的空格，如http://jsfiddle.net/pH4KY/1/
为每个人添加margin-right: -0.3em。就像这里：http://jsfiddle.net/pH4KY/7/

另外，请考虑以每个浏览器都能理解的方式声明inline-block元素：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

显示：内联块文本溢出导致对齐问题

1 个答案: