Question

我试图在一个固定宽度 div 中水平显示一些 div (boxes) 。我想用一个水平滚动条来显示所有不适合于父基 div 的 div 。

但是, 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>

Answer 1

是的,通过在它们周围贴上包装纸。像这样 http://dabblet.com/gist/2787474

Answer 2

您给定了 .box 宽度 100%, 所以它总是要用整个页面的宽度, 因此没有空间将其它框放在它旁边。让它缩小宽度, 它会工作。

http://jsfiddle.net/JdeaZ/

Answer 3

@RobinJ建议, 给盒子一个特定的宽度。

此外,我还会摆脱边距:自动;因为这会将您的 div 居中。您可以使用边距左侧: 10px; 边距右侧: 10px; 给您左侧和右侧一些间距。

我的代码会是这样看的:

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

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

(c) Cs 和Cs

#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

友情链接