Question

我正在制作一个简单的小项目，我似乎无法弄清楚造型。

基本上，我需要做的是将'div'从其父级顶部向下放置一定数量的像素。要做到这一点，我的位置是绝对的，并设置为我需要的任何像素偏移。这个问题有时两个'div'将在父级中处于相同的垂直位置（或接近它）并且将重叠。当它们重叠时，我需要将它们水平并排排列。我知道如何使用relative和float属性的位置来执行此操作，但这会破坏垂直定位。

使用jQuery动态插入这些框，它们的位置可以经常更改。

这是一个jsfiddle来演示。

HTML

<div class="main">
  This is okay
  <div style="top: 25px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="top: 100px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="position: absolute; top: 200px;">
    This is the problem
  </div>
  <div style="top: 250px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="top: 260px;" class="sub">
    <h3>
      test
    </h3>
  </div>
</div>

CSS

.main {
  background-color: grey;
  height: 700px;
}

.sub {
  border: thin solid black;
  position: absolute;
}

Answer 1

你可以在其他div中创建子div并给出这个绝对位置

＆＃13;

.main {
  position:relative;
  background-color: grey;
  width:100%;
  height:auto;
}

.sub {
  position: absolute;
  top:100px;
  width:100%;
}
 .child {
  border:2px solid black;
  width:500px;
  height:500px;
  margin:10px auto;
 }

＆＃13;

<div class="main">
   <div class="sub">
      <div class="child"></div>
      <div class="child"></div>
   </div>
</div>

＆＃13;

如果您希望它们水平添加到 .child

float:left;
width:47%;
margin:1%;

Answer 2

据我所知，这不能用CSS解决。我最终做了一些相当复杂的javascript来检测碰撞并适当地重新定位div。

如何将<div>绝对位置设置为父级和相对于邻居的位置

2 个答案: