divの内側のdivの絶対位置

Question

私は簡単にそれを見て私の問題のバイオリンを作った：

https://jsfiddle.net/6jzb09nd/

私は、ネストされたdiv要素のシリーズを持っています。そして、巣の最下部はdivを絶対的に配置したいので、親divの中に置くことができます。

ページ上で唯一のものが見つかったときに機能しますが、他の要素の追加を開始すると、位置がすべて乱れてしまいます。

「// float：left」のコメントを外すと、位置ずれが表示されます。ここで

コードです：

.col-sm-2, 
.col-sm-10 { 
    //float:left; 
} 

.leftnumouter { 
    color: #fff; 
    font-size: 4.5vw; 
    height: 4.5vw; 
    width: 4.5vw; 
    float: left; 
    background: #393; 
    position: relative; 
    border: 0px solid black; 
} 

.rightnumouter { 

    color: #fff; 
    font-size: 4.5vw; 
    height: 4.5vw; 
    width: 4.5vw; 
    float: left; 
    background: #C33; 
    position: relative; 
    border: 0px solid black; 
} 

.leftnuminner { 
    color: #000; 
    position: absolute; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.rightnuminner { 
    color: #fff; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.lefttextouter { 
    background: #3C9; 
    border-radius: 0 1.5vw 1.5vw 0; 
    color: #000; 
    font-size: 3vw; 
    height: 3.2vw; 
    text-transform: uppercase; 
    float: left; 
    padding: 0 0 0 0; 
    position: relative; 
} 

.righttextouter { 
    background: #C69; 
    border-radius: 0 1.5vw 1.5vw 0; 
    color: #000; 
    font-size: 3vw; 
    height: 3.2vw; 
    text-transform: uppercase; 
    float: left; 
    padding: 0 0 0 .2vw; 
    position: relative; 
} 

.lefttextinner { 
    color: #000; 
    margin: 0 .5vw 0 0; 
} 

.righttextinner { 
    color: #000; 
    margin: 0 1vw 0 0; 
} 

<div class="col-sm-2"> Blah 
</div> 
<div class="col-sm-10"> 
    <div class="preview"> 
    <div class="databubble"> 
     <div class="leftnumouter"> 
     <div class="leftnuminner">5 
     </div> 
     </div> 
     <div class="lefttextouter"> 
     <div class="lefttextinner">Sales 
     </div> 
     </div> 
    </div> 
    <div class="databubble"> 
     <div class="rightnumouter"> 
     <div class="rightnuminner">3 
     </div> 
     </div> 
     <div class="righttextouter"> 
     <div class="righttextinner">Orders 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

Answer 1

そのコンテンツへfloat崩壊を持つ要素以来、あなたはそれを幅

.col-sm-2, 
 
.col-sm-10 { 
 
    float:left; 
 
    width: 100%; 
 
} 
 

 
.leftnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #393; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.rightnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #C33; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.leftnuminner { 
 
    color: #000; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.rightnuminner { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.lefttextouter { 
 
    background: #3C9; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 0; 
 
    position: relative; 
 
} 
 

 
.righttextouter { 
 
    background: #C69; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 .2vw; 
 
    position: relative; 
 
} 
 

 
.lefttextinner { 
 
    color: #000; 
 
    margin: 0 .5vw 0 0; 
 
} 
 

 
.righttextinner { 
 
    color: #000; 
 
    margin: 0 1vw 0 0; 
 
}

<div class="col-sm-2"> Blah 
 
</div> 
 
<div class="col-sm-10"> 
 
    <div class="preview"> 
 
    <div class="databubble"> 
 
     <div class="leftnumouter"> 
 
     <div class="leftnuminner">5 
 
     </div> 
 
     </div> 
 
     <div class="lefttextouter"> 
 
     <div class="lefttextinner">Sales 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="databubble"> 
 
     <div class="rightnumouter"> 
 
     <div class="rightnuminner">3 
 
     </div> 
 
     </div> 
 
     <div class="righttextouter"> 
 
     <div class="righttextinner">Orders 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

または数を設定を与える必要がすべての動作をさせるルールが増えます

`.databubble { フロートにフロートを使用してみました

.preview { 
    overflow: hidden; 
    white-space: nowrap; 
} 
.databubble { 
    display: inline-block; 
} 

サンプル

.col-sm-2, 
 
.col-sm-10 { 
 
    float:left; 
 
} 
 
.col-sm-2:after, 
 
.col-sm-10:after { 
 
    content: ''; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
/* added these 2 rules */ 
 
.preview { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.databubble { 
 
    display: inline-block; 
 
} 
 

 
.leftnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #393; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.rightnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #C33; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.leftnuminner { 
 
    color: #000; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.rightnuminner { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.lefttextouter { 
 
    background: #3C9; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 0; 
 
    position: relative; 
 
} 
 

 
.righttextouter { 
 
    background: #C69; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 .2vw; 
 
    position: relative; 
 
} 
 

 
.lefttextinner { 
 
    color: #000; 
 
    margin: 0 .5vw 0 0; 
 
} 
 

 
.righttextinner { 
 
    color: #000; 
 
    margin: 0 1vw 0 0; 
 
}

<div class="col-sm-2"> Blah 
 
</div> 
 
<div class="col-sm-10"> 
 
    <div class="preview"> 
 
    <div class="databubble"> 
 
     <div class="leftnumouter"> 
 
     <div class="leftnuminner">5 
 
     </div> 
 
     </div> 
 
     <div class="lefttextouter"> 
 
     <div class="lefttextinner">Sales 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="databubble"> 
 
     <div class="rightnumouter"> 
 
     <div class="rightnuminner">3 
 
     </div> 
 
     </div> 
 
     <div class="righttextouter"> 
 
     <div class="righttextinner">Orders 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>