如何避免div執行新行如果一行已滿？

-1

如何避免<div>標籤執行新行，如果一行已滿。我們假設這個div有一組圖像。如何避免div執行新行如果一行已滿？

------------------------------------ 
|         | 
|  Image 1   Image 2 | 
|         | 
|         | 
|  Image 3   Image 4 | 
|         | 
------------------------------------

在<div>的圖像PHP的循環期間執行新行，並出現由於在CSS的overflow: scroll;碼的滾動條。我所需的輸出是：

|----------------------------------| 
|         | 
|  Image 1  Image 2  Imag| 
|         | 
|         | 
|----------------------------------|

注：圖片3和4，打印如果您滾動股利到了一邊。

這是我期望的輸出，其中將有一個水平滾動條，並且滾動的視圖將是水平的。任何想法如何做到這一點？

來源

2015-09-08 Niel Sinel

你可以分享HTML和CSS的_complete_和_relevant_代碼 – Tushar

將white-space: nowrap;應用於您的div。

div{ 
    white-space: nowrap; 
}

來源

2015-09-08 05:28:00

試試你自己，你可能知道這一點。這是圖像被包裝成一條線的方式。 –

新增white-space: nowrap; display:inline-block;到您的div

來源

2015-09-08 05:31:11

元素將永遠不會換行 –

就試試這個：

.imgbox { 
 
    height:300px; 
 
    width:100%; 
 
    overflow-y:hidden; 
 
    overflow-x:auto; 
 
    border:1px solid red; 
 
    white-space: nowrap; 
 
} 
 

 
img 
 
{ 
 
    height:300px; 
 
}

<div class="imgbox"> 
 
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="image1" /> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="image1" /> 
 
    <img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" alt="image1" /> 
 
    <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" alt="image1" /> 
 
</div>

注：如果你只想水平滾動，你必須指定overflow-y:hidden; & overflow-x:auto;所以它會隱藏垂直滾動條，只會在需要時纔會給出水平滾動條。

希望這可以幫助你。

來源

2015-09-08 05:39:48 divy3993

如何避免div執行新行如果一行已滿？

回答

相關問題