Question

作为一名后端开发人员，我发现自己在使用我正在处理的标题时遇到了一些问题（仅限HTML / CSS）。 小提琴：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中容器的最小宽度

我的问题：黄色框在灰色框下方不断折叠，灰色框在响应浏览器宽度时在绿色下折叠。

我的目标：我希望标题开始删除框之间的空格而不是搜索栏以逐渐缩小。

搜索栏确实有一点回应，但我似乎无法弄清楚如何获得框之间的边距来做同样的事情。如果有人能指出我正确的方向，我真的很感激它！

注意：由于我们处理广泛的分辨率，你将不得不扩展小提琴。

谢谢！

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”，这样您就可以将盒子置于绝对位置（以百分比表示），而不会留下边距。例如，如果main-nav的宽度为250px - http://jsfiddle.net/yoom1jvw/2/

Answer 2

我不太确定你想要什么。

但是，我相信您可以根据自己的需要进行更改

<!DOCTYPE html>
<html>
<head>
 <style>
  #header{
   margin:0px auto;
   width:95%;
   height:80px;
   background-color:blue}

 .container{
  display:block;
  float:left}

  .block{
   display:block;
   margin:0px auto;/*all blocks are centered in their container*/
   max-width:100%}/*so a block can be greater than its container*/

  #container1{width:20%}/*all the percentage must add up to 100%*/ 
  #container2{width:20%}/*these are the widths of all the containers in %*/
  #container3{width:10%}/*container3 is smaller than container4 by 20%*/
  #container4{width:30%}
  #container5{width:20%}

  #block1{
  background-color:black;
  width:200px;
  height:60px;}

 #block2{
  background-color:white;
  width:300px;
  height:50px}

 #block3{
  background-color:green;
  width:100px;
  height:70px}

 #block4{
  background-color:grey;
  width:400px;
  height:60px}

 #block5{
  background-color:yellow;
  width:200px;
  height:50px}
 </style>
</head>
<body>
 <div id="header">
    <div id="container1" class="container"><!--container for block-->
        <div id="block1" class="block"></div><!--Actual Block-->
    </div>

    <div id="container2" class="container">
        <div id="block2" class="block"></div>
    </div>

    <div id="container3" class="container">
        <div id="block3" class="block"></div>
    </div>

    <div id="container4" class="container">
        <div id="block4" class="block"></div>
    </div>

    <div id="container5" class="container">
        <div id="block5" class="block"></div>
    </div>
</div>   
</body>
</html>

注意：所有容器的宽度可以相同，因此您不需要所有额外的ID 只需确保它们加起来为100％

这是现场http://jsfiddle.net/6wpoecg3/

响应式标题问题

2 个答案:

解决方案