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

我有这个问题，当我使用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> 
}

来源

2011-10-20 daniel blythe

在网站上，你有这个问题？我目前无法看到问题 – Steve

正如@Steve所说，我们无法看到存在问题的atm ..它仍然存在吗？ - 但是从代码的其余部分我建议仔细看看不同的'display'属性是如何工作的，然后仔细选择一个或者可能（可能在这种情况下）考虑一个'float'。例如。 '

$ result2 [0]

hello

'表示可能存在误解。 – polarblau

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/

来源

2011-11-07 14:12:11 unclenorton

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

回答

相关问题