Question

我在div中有2个div，我希望2个div与父容器的顶部相距0px，并且它们周围没有边距。

我尝试将2个div的位置设置为relative，并将top设置为0px，将边距设置为0px，但是由于某种原因它没有设置它们。

<div id="firstOuter">

  <div class="outer">
    <div>
      one
    </div>
    <div>
      two
    </div>
  </div>

  <div class="outer">
    <div>
      one
    </div>
  </div>

</div>

return str.split(',').every(function(val) {
    return parseInt(val) == val; // or any of the many other ways to check if a string is a number
});

Answer 1

display:inline-block非常棘手。它会将空间视为元素被视为内联块。你应该a）删除空格，b）正确设置垂直对齐。

#firstOuter {
  border: 1px solid orange;
}
.outer {
  display: inline-block;
  border: 1px solid red;
  vertical-align:top; 
}

<div id="firstOuter"><div class="outer">
    <div>
      one
    </div>
    <div>
      two
    </div>
  </div><div class="outer">
    <div>
      one
    </div>
  </div></div>

Answer 2

您可以将vertical-align:top;添加到.outer css，

.outer {
  position: relative;
  top: 0;
  margin: 0;
  display: inline-block;
  border: 1px solid red;
  vertical-align:top;
}

然后在div中添加注释以删除空格

</div><!--
--><div class="outer">

<强> JSFIDDLE DEMO

或只删除divs

之间的空格

</div><div class="outer">

<强> JSFIDDLE DEMO

Answer 3

浮动外部div是解决方案的第一部分。然后你需要自己清除父容器，以便div按预期进行包装。

https://jsfiddle.net/partypete25/5r06zjm3/

#firstOuter {
  border: 1px solid orange;
}
#firstOuter:after {
  content: "";
  display: table;
  clear: both;
}
.outer {
  float:left;
  margin: 0;
  display: inline-block;
  border: 1px solid red;
}

将div的顶部和边距设置为零

3 个答案: