html - 浮动 div 使用 % 宽度，最小/最大宽度和 100% 高度（响应式）

Question

我有 2 个 div，一个需要固定宽度，另一个需要响应用户设备。目前，当低于某个宽度时，浮动 div 会跳到单独的行上。有没有办法...

1) 使它们都达到身体的 100% 高度

2）保持在同一条线上，这样右侧的 div 可以缩小宽度，而左侧的 div 保持它的最小/最大宽度？

此外，70% 的正确 div 永远不会填满 70% 的可用空间。

我意识到我正在尝试做的事情有点矛盾，但我想不出办法来解决它。

http://jsfiddle.net/建立/fxQfv/

HTML

<article>
</article>

<section>
</section>

CSS

article  { 
background: blue;
float: left;
height: 100px;
width: 30%;
min-width: 200px;
max-width: 200px;
}

section  { 
background: red;
float: left;
height: 100px;
width: 70%;
}

​ ​</p>

Answer 1

http://jsfiddle.net/fxQfv/3/

article  { 
    background: blue;
    height: 100px;
    width: 30%;
    float:left;
    min-width: 200px;
    max-width: 200px;
}

section  { 
    background: red;
    height: 100px;
    width: auto;
}

对于您的身高问题，请查看这篇文章：http ://www.alistapart.com/articles/fauxcolumns/ ​</p>

Answer 2

你的问题是这两行：

min-width: 200px;
max-width: 200px;

他们与这条线相矛盾：

width: 30%;

将section始终为宽度的 70%，但article始终为200px. 如果您删除这两行，它将起作用。

如果您需要文章是200px，则该部分应该是width: auto，尽管我不知道是否所有浏览器都保证了这种行为。

Answer 3

我不认为你的想法可以分别使用这两个元素来实现。相反，我会将其<article>放入<section>，然后制作该部分

section  {
width: 100%;
}​

这样， the<section>将始终适合行，并且<article>仍然可以具有固定宽度。此外，您不需要为 输入百分比宽度<article>，因为设置max-width = max-height将替换它。

http://jsfiddle.net/fxQfv/4/