HTML div内にテキストを収める方法

Question

こんにちは私はいくつかのテキスト '基本的な詳細'でdivを持っています。私は、DetailsがBasicより下になるようにしたい。

これをどのように達成できますか？

は、ここに私のjsbin Iくぼみは、ここで任意のコードが含まれ https://jsbin.com/dudine/edit?html,css,output

申し訳ありませんがみんなあります。

HTML

.textStyle { 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 90%; 
 
    white-space: normal; 
 
} 
 
.left-rounded-corner { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
    line-height: 16px; 
 
    box-sizing: border-box; 
 
    padding-top: 10px; 
 
    border-top-left-radius: 50px; 
 
    border-bottom-left-radius: 50px; 
 
} 
 
/*Allign elements in horizontally*/ 
 
.element_align_horizontally { 
 
    display: inline-block; 
 
}

<div id='statusContainer' class='scrollable'> 
 
    <div class="left-rounded-corner element_align_horizontally textStyle">Basic Details</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">two</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">three</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">Four</div> 
 
    <div class="right-rounded-corner element_align_horizontally textStyle">Five</div> 
 
</div>

あなたの助け ラオ

Answer 1

のおかげであなたは、これは余分なマークアップなしに実現するためにいくつかのことを必要とする...

.left-rounded-corner { 
    ... 
    line-height: 16px; 
    box-sizing: border-box; /* include padding and margin in height */ 
    padding-top: 10px; /* move text down a bit */ 
} 
.textStyle { 
    ... 
    font-size: 90%; /* something big enough to force wrap without extra markup */ 
    white-space: normal; /* allow wrapping */ 
}