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

我有2个div，一个需要是固定宽度，另一个需要用户设备。目前，当低于一定的宽度时，浮动的div跳到单独的行上。有没有）的方式来...使用％宽度的浮动div使用最小/最大宽度和100％高度（响应）

1让他们身体

2的两个100％的高度）保持在同一行，因此右侧的div的宽度可缩小，而左侧的div保留它的最小/最大宽度？

此外，70％的正确分额永远不会占满整个可用空间的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%; 
}

来源

2012-04-13 Dan Christian

两个块没有填满整个页面的原因是因为你有最大宽度上的文章设置。尽管宽度设置为30％，但最大宽度决不允许宽度超过200像素。这意味着因为节只占用了宽度的70％，假设页面宽度的30％大于200px，总会有额外的空白区域。 – dpcasady 2012-04-13 18:40:37

感谢您的回复，我确实意识到这一点，因此我的矛盾评论，我接受任何新的建议。 – 2012-04-13 18:43:33

看起来像你在下面找到你的答案，只是想确保你了解最大宽度:) – dpcasady 2012-04-13 18:47:11

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/

来源

2012-04-13 18:37:56 cp3

太简单了！谢谢。猜猜我甚至不需要30％的工作 – 2012-04-13 18:43:56

工程，但这是非常静态的。 – 2014-02-14 19:12:52

你的问题是这两条线：

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

他们违背这一行：

width: 30%;

section将始终为7宽度的0％，但article始终为200px。如果你删除这两条线，它将工作。

如果你需要的文章是200px，该部分应该是width: auto，尽管我不知道所有浏览器中的行为是否有保证。

来源

2012-04-13 18:40:22

感谢您的帮助，我觉得您误解了我最初的问题，尽管 – 2012-04-13 18:42:57

刚刚看到您的编辑，再次感谢，似乎做的伎俩 – 2012-04-13 18:46:10

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

section { 
width: 100%; 
}

这样，在<section>总是会适应行和<article>仍然可以是一个固定的宽度。此外，您不需要输入<article>的百分比宽度，因为设置max-width = max-height将替换它。

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

来源

2012-04-13 18:51:11

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

回答

相关问题