1

在我正在开发的这个布局中，宽度为 1124 像素且宽度更小，标题的绿色部分下降到新的一行。

我怎样才能让它及其内容随着视口宽度的减小而减小，同时将标题中的所有内容保持在一行中？

现在粉红色元素和绿色元素之间的比例是粉红色占据了头部的 20%，绿色占据了剩下的 80% 的宽度。

绿色内部的输入也应该像它的父级绿色部分一样在宽度上调整得更小。

这是发生这种情况的链接：https ://dl.dropboxusercontent.com/u/270523/help/new.html

根据要求，这里是一个 JSFiddle 复制问题：http: //jsfiddle.net/d7k43/

和基本的CSS：

#logo{
    height:100%;
    width:20%;
    min-width:225px;
    background:pink;
}
#input{
    height:100%;
    width:80%;
    background:green;    
}
4

1 回答 1

2

The problem is #logo { min-width: 225px }. When 0.2X = 225px, X = 1125px total width.

Your green area will still take up 80% of the total width, but the pink area's width will not shrink smaller than 225px. So when the window is less than 1125px, the pink area will take up more than 20% of the total width, which causes the green area to be pushed to a new line.

Example: 500px width window: 225px + .8*(500px) = 625px > 500px.

于 2013-04-21T04:09:02.303 回答