我怎样才能在这里给出正确的div margin top属性？

Question

您好，

我希望右边的红色背景有一些边缘顶部属性，但仍然保持相同的蓝色框。我怎样才能做到这一点？如果我现在给div提供保证金顶部，它会移动整个蓝色div。

<div id="wrapper" style="width: 100%;height: 100px; background-color: blue">
  <div id="left" style="background-color: green; height: 50px; width: 50px;  display: inline-block; float: left">
    left
  </div>
  <div id="right" style="background-color: red; height: 50px; width: 50px; margin-left: 50px;">
    right
  </div>
</div>

Answer 1

只需添加float: left;并删除红色div中的margin-left

<div id="wrapper" style="width: 100%;height: 100px; background-color: blue">
  <div id="left" style="background-color: green; height: 50px; width: 50px;  display: inline-block; float: left">
    left
  </div>
  <div id="right" style="background-color: red; height: 50px; width: 50px; float: left; margin-top: 10px;">
    right
  </div>
</div>

Answer 2

您需要在这两个元素上使用float（如果有的话。使用float的一个不错的替代方法是使用flexbox）。您也不需要margin-left。

#right {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 50px;
  float: left
}

#left {
  background-color: green;
  height: 50px;
  width: 50px;
  float: left
}

#wrapper {
  width: 100%;
  height: 100px;
  background-color: blue
}

<div id="wrapper">
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Answer 3

您可以使用

实现此目的

＆＃13;

＆＃13;

#left {
  background-color: green; height: 50px; width: 50px; float: left;
}
#right {
  background-color: red; height: 50px; width: 50px; margin-top:20px; float:left; margin-left:20px;
}
#wrapper {
width: 100%;height: 100px; background-color: blue; display:inline-block;
}

＆＃13;

<div id="wrapper">
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;