使元素更小，而不是让它掉到新线

在这个布局中，我正在开发，在1124px和更小的宽度，标题的绿色部分下降到一个新的行。使元素更小，而不是让它掉到新线

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

现在粉红色元素和绿色元素之间的比例是粉红色占据了标题的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;  
}

来源

2013-04-21 Irfan Mir

请将您的代码放在js小提琴中，并放在此问题的正文中。当链接断开时会发生什么？这个问题对所有未来的访问者都没有用处，也没有任何其他人遇到同样的问题。 – Daedalus 2013-04-21 03:54:57

@Daedalus 啊，好吧。我明白。我会从现在开始做 – 2013-04-21 04:17:54

有没有理由不能做到_now？_ – Daedalus 2013-04-21 04:28:35

的问题是#logo { min-width: 225px }。当0.2X = 225px时，X = 1125px总宽度。

您的绿化面积仍然占总宽度的80％，但粉色区域的宽度不会小于225px。因此，当窗口小于1125像素时，粉色区域将占用总宽度的20％以上，这会导致绿色区域被推到新的一行。

示例：500px宽度窗口：225px + .8 *（500px）= 625px> 500px。

来源

2013-04-21 04:09:02 thgaskell

使元素更小，而不是让它掉到新线

回答

相关问题