html - 响应标题问题

Question

作为后端开发人员，我发现自己在处理 header (仅限 HTML/CSS)时遇到了一些问题。 fiddle :http://jsfiddle.net/yoom1jvw/

.container{
  margin:0 auto;
  text-align:left;
  height:auto;
  width:95%;
  min-width:1000px;
  max-width:2000px;
  background-color:white;
}

如您所见，在停止响应更改之前，容器的最小宽度为 1000px

我的问题:响应浏览器的宽度时，黄色框一直折叠在灰色框下，灰色框折叠在绿色下。

我的目标::我希望标题开始移除框之间的空间，而不是让框彼此折叠，同时让搜索栏慢慢变小。

搜索栏确实有点 react ，但我似乎无法弄清楚如何让框之间的边距来做同样的事情。如果有人能指出正确的方向，我将不胜感激!

注意:由于我们处理的是宽分辨率，因此您必须将 fiddle 扩展很多。

谢谢!

Answer 1

使用最小宽度的简短计算:

container= 1000px;
_________________________________
logo: 200px
search: 20% of container = 200px
btn-main: 200px
main-nav: 400px
login-box: 100px
---------------------------------
1100px + space between boxes

你的主要问题是你不能在 1000px 的容器中安排大约 1150px ;)

---

解决方案

如果您可以更改某些框的宽度以适合容器。您可以将容器设置为“position: relative”，这样您就可以将您的盒子放置在没有边距的绝对定位(百分比)中。例如，如果主导航的宽度为 250px - http://jsfiddle.net/yoom1jvw/2/