0

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

4 回答 4

1

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

于 2012-05-25T11:21:11.720 回答
1

您已经给定了.box100% 的宽度，因此它将始终占据整个页面的宽度，因此将没有空间将其他框放在它旁边。让它不那么宽，它会起作用。

http://jsfiddle.net/JDeaZ/

于 2012-05-25T11:23:04.853 回答
0

就像@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;
}

希望有帮助；）

于 2012-05-25T11:41:01.430 回答
0

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