基本的に、私は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>
これはおそらく動作することができますが、それはすべてavilableスペースを使用すると、ビューポートは、あなたが望むなら、あなたは正しいが、 –
を小さくなるとき、おそらく、同様span.rightラップをすることはありません小さなデバイスでサイトを使用するには、使用する必要があります(@メディア) –