如何阻止div推动其他div？

Question

我有一些div。

我正在使用一个网格系统，我不能为我的生活弄清楚如何阻止div推动其他人。

当我尝试将边距顶部设置为边框div的50px时，它会推动其他所有内容。

由于是响应式网格系统，我不想使用绝对位置。

＆＃13;

＆＃13;

std::out_of_range

＆＃13;

body {
    font-size: 100%;
    font-family: Lato;
}
img {
    width: 100%;
    height: auto;
    max-height: 640px;
}
h2 {
    font-size: 3.2em;
    font-weight: 300;
    text-align: center;
    margin-top: 160px;
}
ul {
    text-align: center;
    margin-top: 100px;
    overflow: hidden;
    margin-right: 25px;
}
ul > li {
    display: inline-block;
    padding: 0 25px;
    font-size: 1.1rem;
}
#circle {
    font-size: 1.2rem;
    border: 1px solid black;
    border-radius: 5px 20px 5px;
    padding: 0 20px;
}
.border {
    overflow: hidden;
    border: 2px solid black;
    margin-top:;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

在边框div上，您可以删除边距并添加：

position: relative;
top: 50px;

Answer 2

尝试使用：

position: relative; 
top: 50px; 

这是一支笔：http://codepen.io/anon/pen/GpyMKp

为你的边境div。这是一种在不影响其他div的情况下将元素从其通常位置移动的方法。

虽然我觉得你最好只减少你的ul元素的margin-top，你可以实现相同的布局而不是一种“hacky”解决方案。

Answer 3

我觉得有问题的边缘就在这里：

ul {
    margin-top: 100px;
}

删除或缩小它，并按预期将保证金添加到.border。

＆＃13;

＆＃13;

body {
  font-size: 100%;
  font-family: Lato;
}
img {
  width: 100%;
  height: auto;
  max-height: 640px;
}
h2 {
  font-size: 3.2em;
  font-weight: 300;
  text-align: center;
  margin-top: 160px;
}
ul {
  text-align: center;
  overflow: hidden;
  margin-right: 25px;
}
ul > li {
  display: inline-block;
  padding: 0 25px;
  font-size: 1.1rem;
}
#circle {
  font-size: 1.2rem;
  border: 1px solid black;
  border-radius: 5px 20px 5px;
  padding: 0 20px;
}
.border {
  overflow: hidden;
  border: 2px solid black;
  margin-top: 50px;
  ;
}

＆＃13;

<div class="cover">
  <div class="grid"></div>
  <div class="row">
    <div class="c12">
      <div class="border"></div>
      <div class="clear"></div>
      <ul>
        <li id="circle">H</li>
        <li>Home</li>
        <li id="circle">A</li>
        <li>About</li>
        <li id="circle">W</li>
        <li>Work</li>
        <li id="circle">C</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="c12">
      <h2>Exquisite Web Development</h2>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;