水平滑块每个项目占用100％的窗口

Question

我想制作一个水平滑块，每个项目占据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

您可以将display:table用于父div，将display:table-cell用于此div

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

看看JS fiddle

Answer 2

//Try with css and jquery. I hope that you get solutions.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var totalWidth='';
$(document).ready(function(e) {
    $('.container .item').each(function(index, element) {
        totalWidth = totalWidth+$(this).outerWidth(); 
    });
    $('.container_inner').width(totalWidth);
});
</script>
<style type="text/css">
.clear{display:block;height:0px;width:0px;clear:both;}
.container{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  overflow:auto;
}

.item{
  width:100%;
  height:100%;
  float:left;
}
</style>
<div class='container'>
    <div class="container_inner">
        <div class='item'>item1</div>
        <div class='item'>item2</div>
        <div class='item'>item3</div>
        <div class='item'>item4</div>
        <div class='clear'></div>
    </div>
</div>