使圖像div水平溢出父div

我有一個非常簡單的問題，我無法克服。我有一個父div，裏面有4個圖像，我想圖像從父div（水平）溢出，但我似乎無法實現這一點。使圖像div水平溢出父div

.imgBanner { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    display: inline-block; 
 
} 
 
.slideShow { 
 
    width: 400px; 
 
}

<div class="slideShow"> 
 
    <img class="imgBanner"> 
 
    <img class="imgBanner"> 
 
    <img class="imgBanner"> 
 
    <img class="imgBanner"> 
 
</div>

這是我使用的代碼，但它似乎並沒有溢出，即使我使用的顯示inline-block的。

結果將隱藏溢出的圖像，並使用JavaScript創建幻燈片。

編輯：忘了添加小提琴。 https://jsfiddle.net/pwL2hy7s/

謝謝:)

來源

2016-01-28 DevStacker

您可以在容器上使用

white-space: nowrap;

。這將允許元素繼續內聯，而不會被迫中斷。

來源

2016-01-28 13:51:48 GMchris

您還可以添加溢出：隱藏到同一個容器元素，隱藏四溢的圖像。 – GMchris

完美，正是我所需要的。謝謝！ – DevStacker

我想這正是你想要實現的。請參閱下面的內聯演示和評論。

.slideShow { 
 
    width: 400px; 
 
    white-space: nowrap; /*prevent wrapping*/ 
 
    overflow: auto; /*show scrollbar as needed*/ 
 
    font-size: 0; /*remove whitespace*/ 
 
} 
 
.imgBanner { 
 
    background: aqua; 
 
    width: 400px; 
 
    height: 400px; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 
.imgBanner:nth-child(odd) { 
 
    background: gold; 
 
}

<div class="slideShow"> 
 
    <div class="imgBanner"></div> 
 
    <div class="imgBanner"></div> 
 
    <div class="imgBanner"></div> 
 
    <div class="imgBanner"></div> 
 
</div>

瞭解更多關於直列塊空白在How to remove the space between inline-block elements?

來源

2016-01-28 14:03:18 Stickers

使圖像div水平溢出父div

回答

相關問題