水平显示超过 1 个 div 并使用水平滚动条查看它们答案

【问题标题】：displaying more than 1 div horizontally and viewing them using a horizontal scroll bar水平显示超过 1 个 div 并使用水平滚动条查看它们
【发布时间】：2012-05-25 19:53:50
【问题描述】：

我正在尝试在固定宽度的 div 内水平显示多个 div（框）。我想使用水平滚动条来显示所有不适合父 div 的 div。

但是，div 是垂直显示的，而不是水平显示的。有没有办法强制它们并排显示？并使用水平滚动条查看它们。我已经在下面发布了代码。

<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>

【问题讨论】：

标签： html css css-float

【解决方案1】：

是的，通过在它们周围放置一个包装器。赞这个http://dabblet.com/gist/2787474

【讨论】：

非常感谢...非常有用的提示

【解决方案2】：

你已经给了.box 100% 的宽度，所以它总是占据整个页面的宽度，因此没有空间可以放在它旁边。让它不那么宽，它会起作用的。

http://jsfiddle.net/JDeaZ/

【讨论】：

我已将 div class="slidepanel" 宽度的 100% 放入，它不会占用整个页面。请指导我该做什么
@TasneemFathima 我应该更清楚。 width: 100% 将占用其容器的整个宽度。在这种情况下，.slidepanel 包含在 .total 中，其宽度仅为 75%。所以，你需要改变.total的宽度；）

【解决方案3】：

就像@RobinJ 建议的那样，给盒子一个特定的宽度。

我也会去掉边距：auto;因为这将使您的 div 居中。您可以使用例如 margin-left: 10px;右边距：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;
}

希望有所帮助；）

【讨论】：

【解决方案4】：

很酷，只是一些技巧和一种简单的方法，尽可能使用相同的数据值，% 有时会在 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

【讨论】：