Html 水平显示超过1个div并使用水平滚动条查看_Html_Css_Css Float

Html 水平显示超过1个div并使用水平滚动条查看

html css

Html 水平显示超过1个div并使用水平滚动条查看,html,css,css-float,Html,Css,Css Float,我试图在固定宽度的div内水平显示多个div（框）。我想使用水平滚动条显示所有不适合父div的div 但是，div是垂直显示的，而不是水平显示的。有没有办法强迫他们并排展示？并使用水平滚动条查看它们。我已经在下面发布了代码 <html> <head> <title> Slide </title> <style type="text/css"> .total { height:350px; width:75%; border:1px so

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


滑动
全部的
{
高度：350px；
宽度：75%；
边框：1px纯黑；
左边距：自动；
右边距：自动；
利润率最高：15%；
}
.滑动面板
{
边框：1px纯紫色；
宽度：100%；
身高：100%；
溢出-x：滚动；
溢出y：隐藏；
}
斯莱德莱夫特先生
{
边框：1px纯绿色；
宽度：5%；
身高：10%；
左缘：5%；
浮动：左；
文本对齐：居中；
//垫面：1%；
}
.幻灯片
{
//垫面：1%；
边框：1px纯绿色；
宽度：5%；
身高：10%；
左缘：80%；
浮动：左；
文本对齐：居中；
}
.盒子
{
边框：1px纯红；
宽度：100%；
身高：100%；
浮动：左；
左边距：自动；
右边距：自动；
}
>

是的，在它们周围放一个包装。像这样

您已经给了

.box

100%的宽度，因此它将始终占据整个页面的宽度，因此它旁边将没有空间放置其他框。把它弄小一点就行了

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

此外，我会摆脱保证金：汽车；因为这将使您的div居中。您可以使用例如marginleft: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;
}

希望有帮助；）

酷一些技巧和一种简单的方法，尽可能使用相同的数据值，%有时会在IE中抛出元素，px是好的，1200px的宽度在各种屏幕尺寸上都是好的。我会这样做的

HTML

指定特定的px很好，但是在边界技术上做得很好，它有助于定位并获得您想要的正确大小，所以只需尝试宽度

你可以做些奇特的事情，把溢出的x隐藏起来，然后

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

希望这有帮助：D

我已经将div class=“slidepanel”的宽度设置为100%，它不会占用整个页面。。请指导我应该做什么done@TasneemFathima我应该说得更清楚些<代码>宽度：100%将使其占据容器的整个宽度。在本例中，

.slidepanel

包含在

.total

中，其宽度仅为75%。因此，您需要更改

.total

；）的宽度谢谢。。。非常有用的提示

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

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