Позиционирование div с использованием css: макет с абсолютным расположением div

Question

В приведенном ниже коде показан круг плюс панель, построенная с использованием previous post. Проблема, с которой я столкнулся, заключается в том, что на практике bar имеет фиксированную высоту, равную высоте circle. Я думаю, это из-за absoluteinline-block. Тем не менее, мне кажется, что absoluteinline-block, потому что без них text помещается под панелью, а не внутри.

Проблема, с которой я столкнулся, заключается в том, что если текст в пределах text div не помещается в пределах bar (слишком много текста), текст бежит под панель (поэтому высота бара не расширяется). Вторая проблема заключается в том, что если текст очень мало в пределах bar, то bottom-half перекрывается с bar. Как я могу настроить свой код для этих проблем?

.tophalf { 
 
    width: 100%; 
 
    background: #F1F3F2 none repeat scroll 0% 0%; 
 
    padding: 5em; 
 
} 
 
.bar { 
 
    background: #333; 
 
    margin-left: 75px; 
 
    min-height: 150px; 
 
} 
 
.circle { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
 
    margin-left: -75px; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    margin-right: 20px; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    margin-top: 1em; 
 
    position: absolute; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    color: #222; 
 
}

<div class="tophalf"> 
 
    <div class="container"> 
 
    <div class="col-md-12"> 
 
     <div class="bar"> 
 
     <div class="circle"></div> 
 
     <div class="text">My text</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bottom-half"></div>

В фрагменте кода текст «Мой текст» появляется под панелью, в то время как он показывает внутри бара в моем приложении. Я не знаю причину. Возможно, это из-за контейнера div из бутстрапа, который фрагмент, возможно, не обрабатывается как таковой.

Answer 1

Браузер не может регулировать высоту «бара», потому что вы определяете местоположение для «текста», используя «абсолютный». Не могли бы вы обновить стиль css, используя приведенный ниже, и посмотреть, помогает ли это?

.circle { 
 
    width: 150px; 
 
    height: 150px;` 
 
    border-radius: 50%; 
 
    background: white; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
 
    margin-left: -75px; 
 
    position: relative; 
 
    float: left; 
 
    vertical-align: middle; 
 
    margin-right: 20px; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    margin-top: 1em; 
 
    vertical-align: top; 
 
    color: #222; 
 
}

Answer 2

Если вам нужен элемент для определения его высоты по его содержанию, вы можете либо установить его как display: block, либо установить height: auto.

Answer 3

Если позиция text-div является абсолютной, она не будет влиять на высоту обертки.