css - 残りの幅が x ピクセル以上の場合にのみ要素を浮動させる

Question

幅が事前にわからない要素があり、左にフロートさせたいのですが、一部のテキストのために少なくとも x 量のスペースを右側に残している場合に限ります。次のようなことを試しました：

#image { float: left }
#text  { min-width: 30em; }

<img id="image" src="...>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

しかし、#text の幅にはフロートが含まれていると見なされるため、これは機能しません。

左から右へのスペースの量を条件としてフロートを作成するにはどうすればよいですか?

Answer 1

ここで回答: http://css-tricks.com/minimum-paragraph-widths/。

基本的な考え方は、p::before { width: 10em; }ルールを追加することです。

Answer 2

レスポンシブ/アダプティブ デザインを使用し、css3 @ media screen を使用して、異なる画面解像度で要素を異なる方法で配置します

@media only screen and (min-width: 760px) and (max-width: 1280px) { 
    .classname { 

    }
}