div 使用 display inline block 文字會被重疊的問題....

Question

<div class="basic_layout">

    <? while($row = mysqli_fetch_array($data)){?>

      <div class="product_layout" onclick="location.href=URLLLL';">
        <img class="product_icon opacity-black" src="<?=$row['icon'];?>">
        <div class="product_brand">OOO</div>
        <div class="product_name">XXXXXXXXXXXXXXXXXXXX</div>
        <div class="product_price">SSSSSSS</div>
      </div>
    <?}?>

  </div>

只有圖片會被順利排好

.product_layout{
  width: 23%;
  height: 255px;
  margin: 15px 9px;
  display: inline-block;
  border-radius: 5px;
  border: 1px #ccc solid;
  cursor: pointer;
  float: left;
}

每個div至少都會有三行以上的字
唯獨右邊沒有被遮住因為下面沒有div
其他完全都被遮住了
怎麼樣使他不遮住？
完整的div區塊？
我都訂高度255px了還這樣～直接略過文字區域...

Answer 1

1. 如果用了float就不需要用inline-block了.
2. 试一下在product_layout中加上背景色, 看看文字是否超出容器的范围

Answer 2

float会产生高度塌陷，去掉就好了。

Answer 3

大兄弟，你这网站怎么看起来像黄站？

Answer 4

清除浮动，最简单在父元素加overflow：hidden