Question

我有以下CSS和HTML集：

＆＃13;

html, body{
  margin: 0;
}

header{
  border: 1px solid green;
  background-color: green;
  height: 50px;
}

nav{
  border: 1px solid red;
  background-color: red;
  height: 50px;
}

aside{
  border: 1px solid yellow;
  background-color: yellow;
  height: 50px;
  width: 40%;
  float: left;
}

section{
  border: 1px solid blue;
  background-color: blue;
  height: 50px;
  width: 60%;
  float: right;
}

＆＃13;

<body>
  <header>
    
  </header>
  <nav>
    
  </nav>
  <aside>
    
  </aside>
  <section>
    
  </section>
</body>

＆＃13;

但我很困惑，即使将<aside>和<section>设置为浮动属性后，我的<aside>和width: 40%并不是并排的。我将<section>设置为width: 60%，将100%设置为System.out.println(res);。他们不应该加起来System.out.print(res+"\n");并横向填充整个网页吗？

Answer 1

这种情况正在发生，因为4px的额外空间被边框和剖面框中的边框覆盖。只需向{2}提供box-sizing: border-box;

html, body{
  margin: 0;
}

header{
  border: 1px solid green;
  background-color: green;
  height: 50px;
}

nav{
  border: 1px solid red;
  background-color: red;
  height: 50px;
}

aside{
  border: 1px solid yellow;
  background-color: yellow;
  height: 50px;
  width: 40%;
  float: left;
  box-sizing: border-box;
}

section{
  border: 1px solid blue;
  background-color: blue;
  height: 50px;
  width: 60%;
  float: right;
  box-sizing: border-box;
}

<body>
  <header>
    
  </header>
  <nav>
    
  </nav>
  <aside>
    
  </aside>
  <section>
    
  </section>
</body>

Answer 2

您是否考虑了浏览器预设的边距和填充。尝试重置它们。

using ../FileA.Y

为什么我的浮动元素在40％+ 60％宽度设置下无法正常工作？

2 个答案: