3 Div в контейнере с динамической шириной в центре 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 divs в контейнере. Я хочу нажать левую кнопку div слева и правую кнопку div справа, а средние индикаторы div - в центре. Проблема заключается в том, что средний div должен быть динамической шириной, так как число внутренних элементов окружения динамически изменяется на основе других переменных. Там может быть 3 круга или 5 или 10. Мне нужен средний 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

Я хотел бы изменить CSS немного, чтобы получить вещи, как этот jsFiddle example (Div границы добавлены, чтобы сделать их легче визуализировать). Предоставляя средним индикаторам div, левое и правое поле немного больше ширины левой и правой кнопок div, вы позволяете ему плавать между ними и занимать как можно больше места.

CSS:

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; 
}