仅当剩余宽度至少为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

使用自适应/自适应设计，并使用css3 @ media screen以不同的屏幕分辨率对您的元素进行不同的排列

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

    }
}

Answer 2

在这里回答：http://css-tricks.com/minimum-paragraph-widths/。

基本思路是添加p::before { width: 10em; }规则。