Question

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

1）使它们都是身体的100％高度

2）保持相同的线条，因此右侧div可以收缩宽度，而左侧div保留它的最小/最大宽度？

70％的正确div也从未填满70％的可用空间。

我意识到我想做的事情有点像矛盾，但想不出办法。

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%;
}

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/

Answer 2

你的问题是这两行：

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

他们反驳这一行：

width: 30%;

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

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

Answer 3

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

部分

section  {
width: 100%;
}

这样，<section>将始终适合行，而<article>仍然可以是固定宽度。此外，您无需输入<article>的百分比宽度，因为设置max-width = max-height将替换它。

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

浮动div使用％宽度，最小/最大宽度和100％高度（响应）

3 个答案: