Question

我的<header>-tag内有两个方框，总宽度为100％。当我对齐它们时它们非常完美，但是当我缩小窗口时，右边的盒子会向左下方跳跃。这是代码：

header {
  width: 100%;
  height: 90px;
}

#head {
  float: left;
  background-image: url('img/header.jpg');
  height: 120px;
  margin-right: 10px;
  width: 65%;
}

#userinfo {
  float: left;
  height: 100px;
  width: 33.2%;
  background-color: #202020;
  padding: 10px;
  position: relative;
}

<header>
  <section id="head">
  </section>
  <section id="userinfo">
    test
  </section>
</header>

有什么快速解决方法吗？想象一下，随着我的前进，其余的设计都会发生这种情况。提前谢谢。

Answer 1

此处的问题是您在元素上使用padding和margin的某些值，默认情况下会将这些值添加到元素的实际大小，因为这两个元素都是98.2%某些点的容器+20的容器，它们不适合100％并且会中断。

要解决此问题，您可以使用box-sizing属性，这会使padding和border值在声明的总大小范围内，因为这不会与{{margin一起使用1}}您将需要一个额外的容器来使用padding并创建分离：

＆＃13;

header {
  width: 100%;
  height: 90px;
}

#head {
  float: left;
  box-sizing:border-box;
  padding-right: 10px;
  width: 65%;
}
#head > div {
  background-image: url('http://placehold.it/500');
  height: 120px;
}

#userinfo {
  box-sizing:border-box;
  float: left;
  height: 100px;
  width: 35%;
  background-color: #202020;
  padding: 10px;
  position: relative;
}

＆＃13;

<header>
  <section id="head">
    <div></div>
  </section>
  <section id="userinfo">
    test
  </section>
</header>

＆＃13;

Answer 2

感谢DaniP，解决了它。但那么内容和侧边栏部分呢？：

#container {
  margin: 30px auto;
  width: 70%;
  min-height: 400px;
}

#leftmenu {
  float: left;
  box-sizing: border-box;
  width: 20%;
  min-height: 600px;
  background-color: #202020;
}

#content {
  float: left;
  box-sizing: border-box;
  width: 60%;
  background-color: #202020;
  min-height: 600px;
}

#content > div {
  background-color: #202020;
  min-height: 600px;
}

#rightmenu {
  float: left;
  box-sizing: border-box;
  width: 20%;
  min-height: 600px;
  background-color: #202020;
}

当缩小窗口时，使<sections>保持原位

2 个答案: