0

ウィンドウの 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%;
}

ウィンドウの幅を考慮して、スペースを均等に分割して、アイテムを水平に並べて配置したい。これどうやってするの ？

[編集]

ラフスケッチ

4

2 に答える 2

1

display:tableこのように親divとdisplay:table-cell子divに使用できます

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

ここでJSフィドルを見てください

于 2013-03-08T10:07:08.643 に答える
1 
//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>
于 2013-03-08T10:55:10.977 に答える