html - 使用多个 div 定位绝对和左浮动问题

Question

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

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

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

如果我使用此代码，则字符串“test”是一个在另一个之上。但是我想并排对齐它们。我必须使用 position:absolute。有办法吗？

Answer 1

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

颜色仅用于显示每个 div 的拉伸(stretch)方式。

.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;
}

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