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的宽度，允许它在两者之间浮动，并占用尽可能多的空间。

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

3个Div在一个带动态宽度居中Div的容器中

1 个答案: