0
<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>
4

1 に答える 1

0

CSSを少し変更して、このjsFiddleの例のようなものを取得します(視覚化を容易にするためにdivの境界線が追加されています)。中央のインジケーターdivに、左右のボタンdivの幅よりもわずかに大きい左右のマージンを与えることにより、2つの間に浮き上がり、可能な限り多くのスペースを占めることができます。

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;
}
于 2012-05-07T17:17:58.903 に答える