不能 magin-top a div？

Question

我尝试将 magin-top 添加到 div 样式..但它不起作用

这是代码

.side {
  margin-left: 65%;
  margin-top: 3%;
  margin-right: 3%;
  border: 1px solid;
}

.home {
  margin-left: 3%;
  margin-top: 3%;
  width: 62%;
  border: 1px solid;
  float: left;
}

.home h1 {
  margin-top: 0;
}

.side h1 {
  margin-top: 0;
}

<div class="home">
  <h1>Home</h1>
  <p>Just a template.</p>
</div>
<div class="side">
  <h1>Widget Header</h1>
  <hr>
  <p>Widget content.</p>
</div>

我希望 "side" div 与 "home" div

在同一行

Answer 1

使用：

* {
    box-sizing: border-box;
}

.home {
    margin-top: 0;
   //more code....
}

Answer 2

这是你想要的吗？ check here。如果是，请从 .home

中删除 margin-top

Answer 3

我需要它是这样的.. http://imgur.com/tIUgEc1

当我删除 margin-top 并添加 padding-top 时，我得到了这个 .. http://imgur.com/ThaHHUu

Answer 4

问题是您对顶部边距属性使用了百分比（3% 到底是多少百分比？）。您应该考虑使用绝对像素值，或者将您的两列包装在另一个容器中，该容器将具有一个统一的顶部边距。

附带说明（请原谅双关语）您的 side 元素也应该 float: right 如果您希望它执行与 home 相同的行为。删除 margin-left 并设置宽度将使其正确位于 home 列旁边。

幸田

Answer 5

当您将 float:left 分配给一个元素时，该元素会向该方向移动，而其他元素会环绕 it.If 您检查页面，您会看到 .side 覆盖了总宽度页面和 .home 刚好位于 it.To 上使 .side 与 .home 对齐，最小化 .home 的宽度和 .side 的左边距，以便可以容纳两个 div将 page.Next 的宽度应用 float:left 到 .side，以便它可以与 .home 对齐。这是一个可行的解决方案：-

<html>
    <head>
        <style>
          .home {
           margin-left: 3%;
           margin-top: 3%;
           width: 50%;
           border: 1px solid;
           float: left; 
          }
        .side {
        margin-left:5%;
        margin-top: 3%;
        margin-right: 3%;
        float:left;
        border: 1px solid;
        } 
        </style>
    </head>
<body>        
    <div class="home">
    <h1>Home</h1>
    <p>Just a template.</p>
    </div>
    <div class="side">
    <h1>Widget Header</h1>
    <hr>
    <p>Widget content.</p>
    </div>
</body>
</html>

这里有一个 link 的视频，可以让您清楚地了解浮动：https://www.youtube.com/watch?v=xara4Z1b18I

不能 magin-top a div？

Can't magin-top a div?

html

css

margin