Question

我正在尝试创建一系列水平对齐的div，并且只显示覆盖整个屏幕的1个div。

像

这样的东西

div1    div2   div3    div4     div5…

除非用户单击下一步，否则仅在屏幕中显示1 div。

我的HTML

<section id='contents-wrapper' class='container'>
<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>
</section>

CSS

.row{
float: left;
min-width: 600px;
min-height: 800px;
width: 100%
}
.container{
width: 10000px;
}

如何在所有设备和屏幕分辨率上一次只显示1个div？

Answer 1

删除

宽度：100％

来自班级“.row”，

这会使每篇文章的宽度= 10000px

Answer 2

你试过吗，

.row {
  display: inline-block; // as mentioned by bjb568
}

此外，删除所有这些article代码并添加一个article代码，并添加所有div代码作为其子元素。

Answer 3

.theContainer {overflow: auto; white-space: nowrap;}
.theDivs {display: inline-block; width: 100%;}

JS：

document.getElementById('p').onclick = function() { //Back
    document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth-1)*document.getElementById('container').offsetWidth;
}
document.getElementById('n').onclick = function() { //Forward
    document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth+1)*document.getElementById('container').offsetWidth;
}

http://jsfiddle.net/KWwZP/

如何水平对齐div？

3 个答案: