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

css css3 html html5

火爆浪子 2018-07-09 11:23:57 ‧ 3029 瀏覽

<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 檢舉

是不是你訂的高度不夠高?

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-09 12:18:31 檢舉

我調過了，我調整到 500 還是依樣

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-07-10 11:46:09

最佳解答

https://jsbin.com/tujaxukohu/edit?html,output

這樣？

回應 2
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-17 10:37:17 檢舉

這樣好像有點亂

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

亂？
請正確描述，才能改啊。

登入發表回應

Homura

iT邦高手 1 級 ‧ 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>

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-09 15:01:07 檢舉

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

Homura iT邦高手 1 級 ‧ 2018-07-09 15:25:12 檢舉

你是說他會往下跑嗎?

Homura iT邦高手 1 級 ‧ 2018-07-09 15:29:58 檢舉

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

Homura iT邦高手 1 級 ‧ 2018-07-09 15:55:03 檢舉

asys0512
我上面修改了
你試試

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙