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

使用响应式/自适应设计，并使用 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; }规则。