浮动div使用%宽度,最小/最大宽度和100%高度(响应)

时间:2012-04-13 18:24:19

标签: html css

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

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

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

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

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

http://jsfiddle.net/establish/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%;
}

3 个答案:

答案 0 :(得分:0)

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/

答案 1 :(得分:0)

你的问题是这两行:

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

他们反驳这一行:

width: 30%;

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

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

答案 2 :(得分:0)

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

部分
section  {
width: 100%;
}​

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

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