使用多个div来定位绝对和浮动左边问题

让我们假设我有n类，每个类都必须有一个绝对位置并向左浮动。使用多个div来定位绝对和浮动左边问题

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

如果我使用此代码串 “测试” 是一个在另一个之上。我想把它们排列在一起。我必须使用position:absolute。有没有办法做到这一点？我认为它与具有position: absolute的约束

来源

2015-11-06 Chester

你缺少你的测试类的最后一个“讲话标志。如果你想对齐它们并排他们的属性位置上，下，左，右。 – RyanM

为什么 – Paran0a

你能解释一下为什么你必须使用position：absolute吗？ – LinkinTED

一种方式是一个宽度为每个div的，并相应地给他们的位置。

颜色只是显示每个div如何延伸。

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

来源

2015-11-06 07:46:44 Sinstein

这是一个“静态版本”，但我说如果我有N个类“测试”。我能用css完成吗？ – Chester

恐怕不是。因为他们都会有同一班。当你使用'position：absolute'时，你将字元放在一个位置，考虑到屏幕是一个网格。如果你想在不同的位置放置不同的物品，你不能一起做。 – Sinstein

您可以分别标识每一个并根据它们进行定位。我真的不明白为什么你需要'position：absolute'，但也许你可以把所有'div'封装在'div'中。将父div标记为绝对位置，并使用简单的'display：inline-block'将所有内部div对齐。这对你有用吗？ – Sinstein

如果必须使用的位置是：绝对看不到的方式只用CSS来做到这一点。一两件事你可以做的，是动态地计算每个项目的位置在JS并添加每个DIV下面的代码：

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

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

这样你可以有N个div的，每个人都会得到X，Y坐标，你会在页面加载之前计算。

来源

2015-11-06 07:57:51 Bergerova

你可以添加父母绝对测试。

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

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

来源

2015-11-06 08:19:54

使用多个div来定位绝对和浮动左边问题

回答

相关问题