画像とdivの

Question

に2つのスパンの位置合わせは、私は、テキストの次のCSSコードを持っている：

.text2 
{ 
vertical-align: middle; 
color: white; 
text-align: right; 
padding-right: 5px; 
line-height: 40px; 
float: right; 
white-space: nowrap; 
} 

私の問題は、テキスト2は、可変dimentionsの私はそれがオーバーフローすることなく、左に整列されたい であるということです。

https://jsfiddle.net/4oc0b2pe/5/

Answer 1

.divboxheaderための幅を削除します。結果はフルスクリーンモードでのみ表示されます。どのような人々はフレキシボックスを使用しないようにするために使用する奇妙なことの種類

.divbox { 
 
    width: 50%; 
 
    display: inline-block; 
 
    font-family: Helvetica, "Lucida Grande"; 
 
    font-size: 14px; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    padding: 2px; 
 
} 
 

 
.divboxheader { 
 
    display: block; 
 
    height: 40px; 
 
    background-color: rgb(43, 51, 56); 
 
    text-overflow: ellipsis; 
 
} 
 

 
.img { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    height: calc(100% - 4px) !important; 
 
    float: left; 
 
    margin: 2px 0px; 
 
    width: 20%; 
 
} 
 

 
.text1 { 
 
    vertical-align: middle; 
 
    color: white; 
 
    text-align: center; 
 
    padding-left: 5px; 
 
    line-height: 40px; 
 
    width: 50%; 
 
    float: left; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.text2 { 
 
    vertical-align: middle; 
 
    color: white; 
 
    text-align: right; 
 
    padding-right: 5px; 
 
    line-height: 40px; 
 
    float: right; 
 
    white-space: nowrap; 
 
}

<div class="divbox"> 
 
    <div class='divboxheader'> 
 
    <img class='img' src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" /> 
 
    <span class='text1'>Text1 Text1 Text1 text1 text1 text1 text1</span> 
 
    <span class='text2'>text2 text2 text2</span> 
 
    </div> 
 
</div>