Question

假设我有n个类，每个类必须有一个绝对位置并且向左浮动。

＆＃13;

.test {
  position:absolute;
  display:block;
  float:left;
}

＆＃13;

    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>
    <div class="test">test</div>

＆＃13;

如果我使用此代码字符串＆＃34; test＆＃34;是一个在另一个之上。我想把它们并排排列。我必须使用position:absolute。有没有办法做到这一点？

Answer 1

我认为有position: absolute约束的一种方法是为每个div设置一个宽度，并相应地给它们一个位置。

颜色只是为了展示每个div如何延伸。

＆＃13;

.test1,
.test2,
.test3,
.test4 {
  position:absolute;
  width: 50px;
}

.test1 {
  left: 0;
  background: red;
}

.test2 {
  left: 50px;
  background: blue;
}

.test3 {
  left: 100px;
  background: yellow;
}

.test4 {
  left: 150px;
  background: green;
}

＆＃13;

<div class="test1">test1</div>
<div class="test2">test2</div>
<div class="test3">test3</div>
<div class="test4">test4</div>

＆＃13;

Answer 2

如果你必须使用position：absolute我只能看到用CSS做的方法。您可以做的一件事是在JS中动态计算每个项目位置，并为每个DIV添加以下代码：

var translate3D =  "translate3d(" + translateX + "px," + translateY + "px,0px)";

var elementStylePointer = elementDom.style;
elementStylePointer.webkitTransform = translate3D;
elementStylePointer.transform = translate3D;

通过这种方式，您可以拥有N个div，每个div将获得您在页面加载之前计算的X，Y坐标。

Answer 3

你可以添加父绝对测试。

＆＃13;

.abs{
  position:absolute;
  left:100px;
  top:100px;
}
.test{
  float:left;
  display:block;
  border: 1px solid;
  margin: 10px;
}

＆＃13;

<div class="abs">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
</div>

＆＃13;

使用多个div

3 个答案: