设置 div 的 %width 取消 div 的浮动属性

Question

我在放置 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>

Answer 1

似乎你的填充打破了这条线，因为你正在填充 space 的 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;
}

Answer 2

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

宽度：计算（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>

设置 div 的 %width 取消 div 的浮动属性

Setting %width of div cancels div's float property

html

css

width

设置 div 的 %width 取消 div 的浮动 属性

Setting %width of div cancels div's float property

html

css

width

设置 div 的 %width 取消 div 的浮动属性