2015-06-16 3 views
0

Я должен делать что-то глупое или смотреть на что-то очевидное, потому что независимо от того, что я делаю, я не могу получить эти три встроенных внутри этого родителя.Ребенок div не встраивается внутри родительского div

.stats { 
 
    display: inline-block; 
 
    margin-right: 6px; 
 
    float: right; 
 
    padding: 0; 
 
    font-family: "Roboto" sans-serif; 
 
    color: black; 
 
} 
 
.separator { 
 
    background: rgba(47, 187, 255, 0); 
 
    height: 20px; 
 
    width: 1px; 
 
    vertical-align: middle; 
 
    border-left: solid; 
 
    border-width: 1px; 
 
    border-color: rgba(0, 124, 184, 0.7); 
 
    float: left; 
 
    margin-top: 5px; 
 
    margin-left: 4px; 
 
    margin-right: 4px; 
 
    display: block; 
 
}
<div class="stats"> 
 
    <div class="points"><b>Lorem </b>&nbsp; 142</pdiv> 
 
    <div class="separator"></div> 
 
    <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div> 
 
</div>

Что я делаю неправильно?

+0

Это то, что вы хотите? https://jsfiddle.net/a6t7zr4z/ –

ответ

0

Добавлено float:left; в .stats div-children.

.stats { 
 
    display: inline-block; 
 
    margin-right: 6px; 
 
    float: right; 
 
    padding: 0; 
 
    font-family: "Roboto" sans-serif; 
 
    color: black; 
 
} 
 
.stats div{ 
 
    float:left; 
 
} 
 
.separator { 
 
    background: rgba(47, 187, 255, 0); 
 
    height: 20px; 
 
    width: 1px; 
 
    vertical-align: middle; 
 
    border-left: solid; 
 
    border-width: 1px; 
 
    border-color: rgba(0, 124, 184, 0.7); 
 
    float: left; 
 
    margin-top: 5px; 
 
    margin-left: 4px; 
 
    margin-right: 4px; 
 
    display: block; 
 
}
<div class="stats"> 
 
    <div class="points"><b>Lorem </b>&nbsp; 142</div> 
 
    <div class="separator"></div> 
 
    <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div> 
 
</div>

+0

Эй, это отлично сработало для моей ситуации, я знаю, что ответ Мехди также будет работать, но это не помогло мне настроить мой CSS. Спасибо! –

+0

@SebastianOlsen Добро пожаловать! –

0

Вы должны установить дисплей: встроенный (или встроенный блок) для детей, а не родитель:

.stats { 
 
    display: inline-block; 
 
    margin-right: 6px; 
 
    float: right; 
 
    padding: 0; 
 
    font-family: "Roboto" sans-serif; 
 
    color: black; 
 
} 
 
.stats div { 
 
    display: inline; 
 
} 
 
.separator { 
 
    background: rgba(47, 187, 255, 0); 
 
    height: 20px; 
 
    width: 1px; 
 
    vertical-align: middle; 
 
    border-left: solid; 
 
    border-width: 1px; 
 
    border-color: rgba(0, 124, 184, 0.7); 
 
    margin-top: 5px; 
 
    margin-left: 4px; 
 
    margin-right: 4px; 
 
}
<div class="stats"> 
 
    <div class="points"><b>Lorem </b>&nbsp; 142</pdiv> 
 
    <div class="separator"></div> 
 
    <div class="luck"><b>Ipsum</b>&nbsp; 64% <i>Blabla 3</div> 
 
</div>

Edit: я также снял поплавок: слева на сепараторе.

+0

Ah duh! Глупый, мне плохо, что я задал такой глупый вопрос. Большое вам спасибо за вашу помощь. Изменить: у этого разделителя есть float: слева на другой области на странице, над которой я работаю, я просто сделал .stats .separator {float: none;}, чтобы исправить это. :) –

+0

Рад, что это помогло. Как и Густав, вы также можете использовать float: left вместо этого, просто не забудьте очистить после него. Не стесняйтесь повышать;) –

+0

Я бы поднял голову, но у меня, к сожалению, не хватило репутации. Кстати, я редактировал мой комментарий. –

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