html - 水平滑块每个项目占据 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 和子 divdisplay:table-cell

.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>