我有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%;
}
答案 0 :(得分:0)
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
将替换它。