为什么我的浮动元素在40%+60%宽度设置下不能正常工作？

沃梦达教程前端问题

2022-01-01

Why does my float elements not working properly at 40% + 60% width settings?(为什么我的浮动元素在40%+60%宽度设置下不能正常工作？)

本文介绍了为什么我的浮动元素在40%+60%宽度设置下不能正常工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下css和html设置：数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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;
}

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

但我感到困惑的是，即使在将<aside>和<section>设置为浮点属性之后，它们也不是并排的。我将<aside>设置为width: 40%，将<section>设置为width: 60%。它们不是应该加在一起100%并横向填充整个网页吗？

推荐答案

发生这种情况是因为4px的额外空间被边框和部分框中的边框覆盖。只需同时向两者提供box-sizing: border-box；

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于为什么我的浮动元素在40%+60%宽度设置下不能正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：为什么我的浮动元素在40%+60%宽度设置下不能正常工作？

上一篇：计算CSS3幻灯片中10个或更多图像的百分比

下一篇：美丽的汤元内容标签

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX