Question

我正在尝试在固定宽度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>

Answer 1

是的，在它们周围放一个包装。像这样http://dabblet.com/gist/2787474

Answer 2

您已将.box宽度设为100％，因此它将始终占据整页的宽度，因此没有剩余空间将其他框放在旁边。减少它的宽度，它会起作用。

http://jsfiddle.net/JDeaZ/

Answer 3

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

我也会摆脱边缘：自动;因为这将使你的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;
}

希望有所帮助;）

Answer 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;
}

很好地指定特定的px，但在边框技术上做得很好，它有助于定位和获得你想要的正确尺寸，所以只需要试验宽度。

你可以做一些奇特的事情并使溢出-x隐藏然后

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

希望有所帮助：D

水平显示多个div并使用水平滚动条查看它们

4 个答案: