水平顯示多於1格，並使用水平滾動條查看它們

我試圖在固定寬度div內水平顯示一些div（框）數。我想使用水平滾動條來顯示所有不適合父div的div。水平顯示多於1格，並使用水平滾動條查看它們

但是，divs垂直顯示，而不是水平顯示。有沒有辦法強制他們並排顯示？並使用水平滾動條查看它們。我已經發布了下面的代碼。

<html> 
<head> 
<title> Slide </title> 
<style type="text/css"> 
.total 
{ 
height:350px; 
width:75%; 
border:1px solid black; 
margin-left:auto; 
margin-right:auto; 
margin-top:15%; 
} 
.slidepanel 
{ 
border:1px solid purple; 
width:100%; 
height:100%; 
overflow-x: scroll; 
overflow-y: hidden; 
} 
.slideleft 
{ 
border:1px solid green; 
width:5%; 
height:10%; 
margin-left:5%; 
float:left; 
text-align:center; 
//padding-top:1%; 
} 
.slideright 
{ 
//padding-top:1%; 
border:1px solid green; 
width:5%; 
height:10%; 
margin-left:80%; 
float:left; 
text-align:center; 
} 
.box 
{ 
border:1px solid red; 
width:100%; 
height:100%; 
float:left; 
margin-left:auto; 
margin-right:auto; 
} 

</style> 
</head> 
<body> 
<div class="total"> 
<div class="slidepanel"> 
<button class="slideleft"> 
<< 
</button> 
<button class="slideright"> 
>> 
</button> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
</div> 
</div> 
</body> 
</html>

來源

2012-05-25 Tasneem Fathima

是的，通過在他們周圍的包裝。像這樣http://dabblet.com/gist/2787474

來源

2012-05-25 11:21:11 Ana

非常感謝......非常有用的技巧 –

您已經給出.box寬度100％，所以它將始終佔用整頁的寬度，因此將沒有空間將其他框放在旁邊。使它不那麼寬，它會工作。

http://jsfiddle.net/JDeaZ/

來源

2012-05-25 11:23:04 RobinJ

我已經把100％ div class =「slidepanel」的寬度，它不會佔用整個頁面。請指導我必須完成什麼 –

@TasneemFathima我應該已經更清楚了。 '寬度：100％'將佔用其容器的整個寬度。在這種情況下，'.slidepanel'包含在'.total'中，其寬度只有75％。所以，你需要改變'.total'的寬度;） – RobinJ

就像@RobinJ建議，給框中特定的寬度。

另外，我會擺脫邊距：汽車;因爲這會使你的div居中。你可以使用例如margin-left：10px; margin-right：10px;在你的div的左側和右側給它一些間距。

這將如何我的代碼看起來：

.box{ 
    border:1px solid red; 
    width: 300px; /*fill in your desired width*/ 
    height: 300px; /*fill in your desired height*/ 
    float:left; 
    margin-left: 10px; 
    margin-right: 10px; 
}

希望幫助;）

來源

2012-05-25 11:41:01 Martie

酷只是一些提示和使用相同的數據值儘可能做，工作的一個簡單方法可能，％有時候會在IE中引發元素，px是好的，1200px的寬度對於各種屏幕尺寸都是很好的。這裏是我將如何做到這一點。

HTML

<div id="box_wrapper"> 
    <div class="box"> 
    </div> 
    <div class="box"> 
    </div> 
    <div class="box"> 
    </div> 
</div>

的CSS

#box_wrapper { 
    height: 400px; 
    width: 1200px; 
    margin: /*top and bottom*/5px auto/*left and right*/; /*this will keep it centred*/ 
    overflow-x: scroll; 
} 
.box { 
    float: left; 
    width: 1200px; 
    height: 398px; 
}

上邊框技術將其與定位幫助，並得到你想要所以只是實驗的正確尺寸的良好指定特定的像素，但好工作寬度。

你可以做一些花哨，使溢出-X隱藏，然後

#box_wrapper:hover { 
overflow-x: scroll; 
}

希望幫助：d

來源

2012-05-25 11:53:50 TheLegend

水平顯示多於1格，並使用水平滾動條查看它們

回答

相關問題