如何用下列元素忽略溢出的內容？

我有一個ul列表在每個李中包含1個數字元素。圖像的下半部分img-element我通過使用overflow隱藏：隱藏到父元素和寬度：100％到img元素。如何用下列元素忽略溢出的內容？

但是因此圖形元素的高度仍然是「最大」的一個，所以我想我需要額外的東西來防止這種情況。我screenshoted它的問題的更好的可視化：

我使用此代碼樣式李和人物元素：

.rf_re1_produkt_details *{ 
    box-sizing: border-box; 
} 

.rf_re1_produkt_details ul{ 
    width:100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    height:auto; 
    margin-top:45px; 
} 

.rf_re1_produkt_details li{ 
    width:40%; /* Originally it's 50%, but to prevent the whitespace-problem of inline-block here, I adjusted it for a quick and dirty view */ 
    display: inline-block; 
    margin:0; 
    border:0; 
    list-style: none; 
    overflow:hidden; 
    height:auto; 
} 

.rf_re1_produkt_details li:nth-of-type(odd){ 
    border-right:1px solid #fff; 
} 

.rf_re1_produkt_details figure{ 
    padding: 0; 
    margin:0; 
    border:0; 
    overflow:hidden; 

} 

.rf_re1_produkt_details figure img{ 
    width: 100%; 

}

這是標記因此：

<section class="rf_re1_produkt_details"> 
    <ul> 
     <li> 
      <figure> 
       <img src="bilder/fooimg1" /> 
       <figcaption>Unüberwindliche Weichen</figcaption> 
      </figure> 
     </li> 
     <li> 
      <figure> 
       <img src="bilder/fooimg3.jpg" /> 
       <figcaption>Zigeunerschnitzel (Oops, Polizei)</figcaption> 
      </figure> 
     </li> 
     <li> 
      <figure> 
       <img src="bilder/fooimg2.jpg" /> 
       <figcaption>Apfelstrudel</figcaption> 
      </figure> 
     </li> 
     <li> 
      <figure> 
       <img src="bilder/fooimg1.jpg" /> 
       <figcaption>Foo</figcaption> 
      </figure> 
     </li> 
    </ul> 
</section>

所以，我基本上想擺脫li塊的2「行」之間的白色差距。如何通過不使用固定尺寸的圖像或數字來做到這一點？

感謝

來源

2015-10-21 Daiaiai

您可以創建輸出演示嗎？在這裏使用Jsfiddle或代碼片段。 –

如果我在codepen中輸入你的代碼，我沒有在你提供的圖片上得到任何東西。你能否爲示例添加更多的代碼以適當地工作 – AntK

您需要在標記中加入空格，因爲我在那裏使用了內聯塊，並且希望在此處保持它的可讀性。或者你在.rf_re1_produkt_details li上使用更小的百分比（例如40％） - 在問題本身中相應地更新它。 – Daiaiai

在我的具體情況，我剛剛知道這個數字元素過高是什麼原因造成的差距。我解決了這個問題 - 只適用於我的特殊情況 - 使用vw值來表示圖形的最大高度。因此我檢查了圖像的尺寸並通過容器的尺寸進行計算。

來源

2015-10-21 15:12:33 Daiaiai

如何用下列元素忽略溢出的內容？

回答

相關問題