Абсолютное положение DIV внутри DIV без абсолютного положения

Я сделал скрипку моей проблемы легко увидеть:Абсолютное положение DIV внутри 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>

источник

2016-10-28 eagers

Пробовал с помощью поплавка на '.databubble { поплавком: слева; } '? Это должно содержать элементы вместе по назначению. https://jsfiddle.net/SimonHayter/6jzb09nd/1/ –

Почему, по-вашему, абсолютное позиционирование - проблема? Этот бит, кажется, работает нормально – CupawnTae

Поскольку элемент с 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>

Или установить несколько больше правил, чтобы все это велось

.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>

источник

2016-10-28 19:08:04 LGSon

Awesome, спасибо! – eagers

Абсолютное положение DIV внутри DIV без абсолютного положения

ответ

Смежные вопросы