DIV边距无效。

Question

DIV边距无效。

5

有人能告诉我以下代码存在什么问题。 .middle 的左和上边距无法工作。

我已经尝试了很多，但是无法找到以下代码中的任何问题。

请注意应用了 .middle 的 div 和 .middle 类。

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

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

- Syed

4个回答

0

看起来您没有为中间的 div 设置 width 和 float。一个解决方法是添加 position:relative 并将 margin-top 和 margin-left 替换为 top 和 left。

Fiddle: http://jsfiddle.net/rqLb7m4a/

- gopalraju

可以，但是如何在绿色div的右侧添加6px的边距呢？ - Syed

如果您需要6像素的空间，请将宽度添加到div中（即30％ - 左侧div的边距 - 中间div的边距 - 右侧div的左右边距），变为（30％ - 6px - 6px -12px）=（30％-24px）。我已经使用calc设置了这个宽度。请参见更新后的fiddle：http://jsfiddle.net/rqLb7m4a/1/ - gopalraju

0

您需要提及宽度，有时自动宽度可能无法正常工作，并且给中间的 div 添加 float: left; 属性。您可以像左侧、中间和右侧一样编写 div。

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

- Arun Kumar M

0

只需在中间元素中添加 float:left 并将 width 设置为一个值。

但是这里我想你希望这个 div 占据所有它可以占据的宽度，对吧？

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

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

- Elheni Mokhles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hidden Hobbes · Accepted Answer

这主要是由于折叠边距造成的。

关于顶部边距，实际上它还在，但它溢出了.container。为了解决这个问题，在.container中添加overflow: auto;以阻止边距折叠。

第二个问题是由于.left被浮动了。为了在.middle左侧添加margin，你可以采取以下方法之一：

使用calc(30% + 12px)（.left的width + .left的margin + .middle的margin）
向.left添加margin-right: 6px;，因为浮动元素的margin不会折叠。感谢@Alohci提供的建议

.container {
  height: 48px;
  width: 80%;
  background-color: #999;
  margin: 0 auto;
  overflow: auto;
}
.left {
  margin-left: 6px;
  height: 40px;
  background-color: red;
  margin-top: 4px;
  float: left;
  overflow: hidden;
  width: 30%;
}
.middle {
  margin-left: calc(30% + 12px);
  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%;
}

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