iT邦幫忙

0

div 使用 display inline block 文字會被重疊的問題....沒辦法完全依照高度排列嗎?

<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了還這樣~直接略過文字區域...

小魚 iT邦好手 1 級 ‧ 2018-07-09 12:02:08 檢舉
是不是你訂的高度不夠高?
asys0512 iT邦研究生 5 級 ‧ 2018-07-09 12:18:31 檢舉
我調過了,我調整到 500 還是依樣

2 個回答

1
froce
iT邦高手 1 級 ‧ 2018-07-10 11:46:09
最佳解答
asys0512 iT邦研究生 5 級 ‧ 2018-07-17 10:37:17 檢舉

這樣好像有點亂

froce iT邦高手 1 級 ‧ 2018-07-17 11:53:55 檢舉

亂?
請正確描述,才能改啊。

1
Homura
iT邦研究生 3 級 ‧ 2018-07-09 13:46:37

改成這樣

css

.product_layout{
    height: 300px;
    width: 23%;

    margin: 15px 9px;
    float: left; 

  }
.product_layout2{
    height: 255px;
    width: 100%;
    display: inline-block;
    border-radius: 5px;
    border: 1px #ccc solid;
    cursor: pointer;
  }

html

<div class="product_layout" onclick="location.href=URLLLL;">
        <div class="product_layout2"> 
            <img class="product_icon opacity-black" style="height:200px" src="https://ithelp.ithome.com.tw/storage/image/profile.jpg">
        </div>
        <div class="product_brand">OOO</div>
        <div class="product_name">XXXXXXXXXXXXXXXXXXXX</div>
        <div class="product_price">SSSSSSS</div>
</div>
看更多先前的回應...收起先前的回應...
asys0512 iT邦研究生 5 級 ‧ 2018-07-09 15:01:07 檢舉

我其實有試過拿掉,但是當我那三行文字如果少了一行,他位置就會不對!

Homura iT邦研究生 3 級 ‧ 2018-07-09 15:25:12 檢舉

你是說他會往下跑嗎?

Homura iT邦研究生 3 級 ‧ 2018-07-09 15:29:58 檢舉

asys0512
你的框線應該是要框圖片的吧?
然後文字在下面?

Homura iT邦研究生 3 級 ‧ 2018-07-09 15:55:03 檢舉

asys0512
我上面修改了
你試試

我要發表回答

立即登入回答