在內容上添加內容和浮動外屏

如果內容超出100％寬度，是否有水平滾動的方法？在內容上添加內容和浮動外屏

例如：我有一個空白頁面，並將其連續添加到的div使用Ajax容器。

CSS父DIV：

position:absolute; 
top: 50px; 
left:240px; 
height: calc(100% - 50px); 
width:calc(100% - 240px); 
background: #F1F1F8; 
white-space: nowrap; 
overflow: auto;

時添加的阿賈克斯子div

position: relative; 
height:100%; 
top:0px; 
bottom:0px; 
width:auto; 
min-width: 300px; 
padding-left:30px; 
padding-right:30px; 
background-color:#282D32; 
float:left;

如果我增加更多的div它打破了線，但我希望有一個滾動條滾動水平。

來源

2016-01-24 Simon Zorn

問題是white-space:nowrap需要具有用於佈局浮動元素沒有影響。您可以將子div設置爲display:inline-block。

如果你只需要水平滾動條，你可以做overflow-x:auto + overflow-y:hidden。

.parent { 
 
    font-size: 0; /*remove whitespace*/ 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 240px; 
 
    height: calc(100% - 50px); 
 
    width: calc(100% - 240px); 
 
    background: #F1F1F8; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 
.child { 
 
    font-size: 16px; 
 
    position: relative; 
 
    height: 100%; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: auto; 
 
    min-width: 300px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    background-color: #282D32; 
 
    display: inline-block; 
 
} 
 
.child:nth-child(even) { 
 
    background-color: #464E55; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

來源

2016-01-24 17:00:25 Stickers

嘗試包裹所有的元素有無限的寬度（999999px或每次添加新的元素時展開），另一個DIV中。這樣父div有固定的寬度（從我可以在你的CSS中看到的100％ - 240px），它有溢出：自動（或者你可以把溢出：滾動），這個新的包裝周圍的所有項目將寬於父母，所以實際上會有內容滾動。你做到這一點的方式你的第五項到達父div的邊緣，它不能在其他地方比在一個新的行。

來源

2016-01-24 17:01:38

在內容上添加內容和浮動外屏

回答

相關問題