css - 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 个 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

我会稍微更改 CSS 以获得这样的东西 jsFiddle example (添加了 div 边框以使其更容易可视化)。通过为中间指示器 div 提供比左右按钮 div 的宽度略大的左右边距，您可以让它在两者之间 float 并占用尽可能多的空间。

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