3個のDivは、動的幅を中心とする区画を持つコンテナにあります。

Question

<style type=text/css"> 

#container { 
height:30px; 
width:100%; 
} 

.left.button { 
float:left; 
width:60px; 
} 

.right.button { 
float:right; 
width:60px; 
} 

.middle.indicators { 
height:30px; 
} 

.middle div{ 
display: inline-block; 
margin: 10px 2px; 
} 

.circle { 
background: rgb(102,102,102); 
border: 1px solid #FFF; 
border-radius: 50% 50% 50% 50%; 
height: 7px; 
width: 7px; 
} 

</style> 

コンテナに3つのdivがあります。私は左のボタンdivを左に押し、右のボタンdivを右に押して中央の中央にdivを表示したいと思います。問題は、他の変数に基づいて内側の円のdivの数が動的に変化するため、中間のdivが動的な幅である必要があることです。 3つの円または5または10があります。中央のdivを必要とし、内側の円divの数に基づいて展開することもできます。

<div id="container"> 
    <div class="left button"></div> 
     <div class="middle indicators"> 
     <div class="circle></div> 
     <div class="circle></div> 
     <div class="circle></div> 
     </div> 
    <div class="right button"></div> 
</div> 

Answer 1

は、私は少しこのjsFiddle example（国境を簡単にそれらを視覚化するために追加のdiv）のようなものを得るためにCSSを変更します。ミドルインジケータのdivに、左右のボタンdivの幅よりわずかに大きい左右のマージンを与えることで、それを2つの間に浮かせて、可能な限りスペースを取ることができます。

CSS：あなたの例では、中心のdiv内

div { 
    border: 1px solid #999; 
} 

#container { 
    height: 30px; 
    width: 100%; 
} 

.left.button { 
    float: left; 
    width: 60px; 
} 

.right.button { 
    float: right; 
    width: 60px; 
} 

.middle.indicators { 
    height: 30px; 
    text-align:center; 
} 

.middle { 
    margin: 0 70px; 
} 

.circle { 
    background: #666; 
    border: 1px solid #FFF; 
    border-radius: 50% 50% 50% 50%; 
    height: 7px; 
    width: 7px; 
    display: inline-block; 
}