Question

有人告诉我以下代码有什么问题。 .middle上的左边距和上边距不起作用。

我工作了很多，但是下面的代码没有发现任何问题。

请注意.middle课程以及div应用的.middle。

＆＃13;

.container {
  height: 48px;
  width: 80%;
  background-color: #999;
  margin: 0 auto;
}
.left {
  margin-left: 6px;
  height: 40px;
  background-color: red;
  margin-top: 4px;
  float: left;
  overflow: hidden;
  width: 30%;
}
.middle {
  margin-left: 6px;
  height: 40px;
  background-color: green;
  margin-top: 4px;
  overflow: hidden;
  width: auto;
}
.right {
  margin-left: 6px;
  height: 40px;
  background-color: blue;
  margin-top: 4px;
  margin-right: 6px;
  float: right;
  overflow: hidden;
  width: 40%;
}
.button {
  float: right;
  margin-right: 6px;
  height: 32px;
  width: 100px;
  border-style: solid;
  border-width: 1px;
  margin-top: 4px;
  border-color: #333;
}
p {
  color: blue;
  overflow: hidden;
  width: 50%;
}

＆＃13;

<div class="container">
  <div class="right">
    <button class="button">Search</button>
  </div>
  <div class="left"></div>
  <div class="middle"></div>
</div>

＆＃13;

Answer 1

这主要是由于折叠边距。

关于上边距，实际上它仍然存在，但它正在溢出.container。要修复将overflow: auto;添加到.container以停止边距折叠的问题。

第二个原因是.left被浮动。要将margin添加到.middle的左侧，您可以：

使用calc(30% + 12px)（（width的{{1}}）+ .left的{{1}}} + margin .left ））
将margin添加到.middle，因为浮动元素margin-right: 6px;不会崩溃感谢@Alohci提供此建议

＆＃13;

.left

＆＃13;

margin

＆＃13;

Answer 2

好像你没有为中间div设置width和float。一个解决方法是添加位置：相对并将margin-top和margin-left替换为top和left。

小提琴：http://jsfiddle.net/rqLb7m4a/

Answer 3

你需要提到宽度，一些时间宽度自动不起作用，也给float：left;财产到中间div。你可以像div，midile和right那样对div进行编码

  <div class="left"> </div>
  <div class="middle"> </div>
  <div class="right">  </div>

Answer 4

只需将 float：left 添加到中间元素，将设置宽度添加到值。

但是在这里我想你希望这个div能够占用它所能达到的所有宽度，对吗？

我认为是时候使用 flexbox 了： http://jsfiddle.net/w16cq27x/

 .container {
     height: 48px;
     width: 80%;
     background-color: #999;
     margin: 0 auto;
     display:flex;
 }

DIV保证金不起作用

4 个答案: