设置 div 的 %width 会取消 div 的 float 属性答案

【问题标题】：Setting %width of div cancels div's float property设置 div 的 %width 会取消 div 的 float 属性
【发布时间】：2021-05-14 18:06:27
【问题描述】：

我在放置 div 时遇到了问题。 div“菜单”和“内容”应该彼此相邻。它们是，直到我尝试使用 % 而不是 px 设置它们的宽度。应用该更改后，'float：left;'的效果被取消。我尝试更改css文件中参数的顺序，但没有奏效。我希望他们保持 20/80 的比例，同时仍然彼此相邻。我可以使用这种方法实现吗，还是我错过了一些信息，而这些信息不能在同一个 div 上使用？

#menu {
  background-color: lightgray;
  width: 20%;
  min-height: 600px;
  padding: 10px;
  text-align: center;
  float: left;
}

#content {
  background-color: gray;
  width: 80%;
  min-height: 600px;
  padding: 10px;
  float: left;
}

<div id="menu">
  menu
</div>
<div id="content">
  content
</div>

【问题讨论】：

标签： html css width

【解决方案1】：

如果您想保留内边距并保持相同的宽度，请使用这些：

宽度：计算（20% - 20px）； & 宽度：计算（80% - 20px）；

#menu {
  background-color: lightgray;
  width: calc(20% - 20px);
  min-height: 600px;
  margin: 0;
  padding: 10px;
  text-align: center;
  float: left;
}

#content {
  background-color: gray;
  width: calc(80% - 20px);
  min-height: 600px;
  margin: 0;
  padding: 10px;
  float: left;
}

<div id="menu">
  menu is 20% - 20px because of the 10px paddings on left and right
</div>
<div id="content">
  content is 80% - 20px because of the 10px paddings on left and right
</div>

【讨论】：

【解决方案2】：

您的填充似乎打破了界限，因为您正在填充 100% 的空间。见https://jsfiddle.net/6dfs27u8/1/

#menu{
  float: left;
  background-color: lightgray;
  width: 20%;
  text-align: center;
  height: 600px;
}
#content
{
  float: right;
  background-color: gray;
  width: 80%;
  height: 600px;
}

【讨论】：

填充是问题，非常感谢！