html - 水平 slider 每个元素占据窗口的 100%

Question

我想为每个元素制作一个水平 slider ，占据 100% 的窗口。我不想使用 CSS 指定容器的宽度，因为它们需要是动态的。

<div class='container'>
  <div class='item'>item1</div>
  <div class='item'>item2</div>
  <div class='item'>item3</div>
  <div class='item'>item4</div>
</div>

CSS如下

.container{
  width:100%;
  height:100%;
}

.item{
  width:100%;
  height:100%;
}

我希望将元素水平并排放置，同时考虑到窗口的宽度并平均分割空间；我该怎么做？

[编辑]

Answer 1

您可以像这样对父 div 使用 display:table，对子 div 使用 display:table-cell

.container
{
    width:100%; 
    height:100%
    display:table;
}
.item
{
    width:100%;
    display:table-cell;
    padding:15px;
}

看这里JS fiddle