The code below shows a circle plus a panel constructed using the previous message . The problem I ran into is that in practice, bar has a fixed height equal to the height of circle . I think this is because of absolute inline-block . However, it seems to me that I need absolute inline-block , because without them, text is placed below the column, and not inside it.
The problem that I encountered is that if the text in the div text does not fit inside the bar (too much text), the text runs under the panel (so the line height does not expand), the second problem is that if the bar very little text, bottom-half overlaps with bar . How can I customize my code for these problems?
.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>
In the code snippet, the text "My text" is displayed under the panel, while in my application the internal panel is displayed. I do not know the reason. Perhaps this is because of the container div from the bootstrap, which the fragment cannot handle as such.
source share