保证金似乎并不适用于所有方面。为什么呢？

Question

我正在尝试做一个像photoshop教程中看到的类似Photoshop的菜单。我只是想用css。

在＃main-box-container中，所有方面都没有响应。

margin: 0 10px 0 10px;

使用float：左边距在左边但不是右边。向右浮动，边距适用于右边但不是左边。我试过清楚：两者和边缘仅在左侧工作。如果我不需要，我不想在#container上使用填充。

我的观点是保持页面流畅，因为它小于920px。我在这里缺少什么？

这是我的作品

＆＃13;

＆＃13;

#container {
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  margin: 10px 10px 0px 0px;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: #fff;
  clear: both;
  /* counld not figure */
  margin: 0 100px 0 10px;
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  margin: 0 0 0 10px;
  border-radius: 0px 0px 10px 10px;
}

＆＃13;

<div id=container>
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除边距并向容器添加填充。边距不计算为宽度，因此如果您设置宽度100％，它将是容器的100％宽度加上边距。

（Demo）

#container {
  padding: 0px 10px 0px 10px;
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: rgb(50, 150, 250);
  clear: both;
  /* counld not figure */
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  border-radius: 0px 0px 10px 10px;
}

<div id="container">
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>