如何水平对齐div？

Question

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

就像是

div1    div2   div3    div4     div5…

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

我的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格？

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/