2016-07-08 4 views
3

基本的に、私は2つのスパン要素を持っています:1つは左に引っ張られ、もう1つは右に引っ張られます。兄弟スパンを満たすときにテキストを折り返す

左側のものが大きいほど、右側のものは数字だけが表示されるはずです。

私が達成しようとしているのは、ウインドウのサイズを変更する際に、右のスパンに合っているときに左のスパンラインを壊して、右のスパンが垂直になるようにします(コンテナdivはおそらく、 。何か案は? http://www.jsfiddle.net/1db4trxo/5/

.pricing { 
 
    width: 100%; 
 
    background: #333; 
 
    color: #fff; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    float: left; 
 
    margin-left: 5px; 
 
} 
 
.right { 
 
    float: right; 
 
    margin-right: 5px; 
 
    color: #f6c42b; 
 
}
<div class="pricing"> 
 
    <span class="left"> Wow, there's kinda lot of text here </span> 
 
    <span class="right"> Just a price </span> 
 
</div>

答えて

1

フレックスボックスでこれを行うことができ、フロートは必要ありません。事実、floats are ignored in a flex container

Revised Fiddle

.pricing { 
 
    display: flex;     /* establish flex container */ 
 
    justify-content: space-between; /* align children at opposite ends */ 
 
    background: #333; 
 
    color: #fff; 
 
} 
 

 
.left { 
 
    margin-left: 5px; 
 
} 
 

 
.right { 
 
    white-space: nowrap;    /* prevent text from wrapping */ 
 
    align-self: center;    /* center element vertically */ 
 
    margin-right: 5px; 
 
    color: #f6c42b; 
 
}
<div class="pricing"> 
 
    <span class="left"> Wow, there's kinda lot of text here </span> 
 
    <span class="right"> Just a price </span> 
 
</div>

0

あなたはそれが私のための仕事だ、この

.left 
{ 
    width: 75%; 
} 

.right 
{ 
    width: 25%; 
} 

のように両方の内側のdiv の幅を設定する必要があります。ここでは

はコードです。

+0

これはおそらく動作することができますが、それはすべてavilableスペースを使用すると、ビューポートは、あなたが望むなら、あなたは正しいが、 –

+0

を小さくなるとき、おそらく、同様span.rightラップをすることはありません小さなデバイスでサイトを使用するには、使用する必要があります(@メディア) –

1

あなたはIE8 +のブラウザをサポートしてCSS tableでそれを行うことができます。

display: table;の2列を右列にdisplay: table-cell; vertical-align: middle;text-align: right; white-space: nowrap;と設定します。

jsFiddleを開き、結果パネルのサイズを変更してください。

.pricing { 
 
    display: table; 
 
    width: 100%; 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
.left, .right { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 0 5px; 
 
} 
 
.right { 
 
    color: #f6c42b; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
}
<div class="pricing"> 
 
    <span class="left"> Wow, there's kinda lot of text here </span> 
 
    <span class="right"> Just a price </span> 
 
</div>

関連する問題