如何在另一个DIV中将4个DIV右对齐

Question

我希望能够将4个div并列放置在父div中的特定位置。 因此，div结构如下（我将称顶部的div为主div）：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

现在我想在主div中将文本为“1”的div设置在左侧。

现在我想在主div中将文本为“2”的div设置在距左侧50px的位置。

现在我想在主div中将文本为“3”的div设置在距左侧150px的位置。

现在我想在主div中将文本为“4”的div设置在距左侧200px的位置。

我想 :-) 我已经尝试了所有可能的CSS结构，但很遗憾它没有起作用。

有人有主意吗？

- Michel

Answer 1

给主要 div 添加 position: relative

对于子元素添加 position: absolute 并通过 left: xyz; top: xyz 定位它们。

- Pekka

---

请告诉我为什么这个有效（因为它确实有效！）它是在'relative'中，因为当我删除它时，内部div会放置在页面顶部。我已经创建了一个带有表格的页面，在其下方是具有innerdivs的div，一切都很好。我可以复制粘贴div / innerdivs，它们也正确显示。但是当我删除'position:relative'时，innerd vis（而不是outer !!）会放置在我的页面顶部（Ie8和FF3）。亲爱的先生，我无法理解这一点：）。您能解释一下为什么存在这种行为吗？明确一点：答案是正确的，只是想理解为什么。 - Michel

@Michel 绝对定位的元素总是相对于其最近的父级元素使用position: relative、position: absolute或者position: fixed来定位（我认为还包括position: fixed）。基本理论可以参考这里：http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning 如果父div没有设置position: relative，则绝对定位会相对于最顶层的元素即body定位。因此，left: 50px实际上是距离文档左上角50像素的位置。 - Pekka

Answer 2

希望这能对您有所帮助

                <div> 
                    <div style="float: left;">1</div> 
                    <div style="float: left; margin-left: 50px;">2</div> 
                    <div style="float: left; margin-left: 100px;">3</div> 
                    <div style="float: left;margin-left: 50px;">4</div> 
                </div>

- KhanS

Answer 3

试试这个：

 div div
      {
          float:left;
          margin-left:50px;
      }

编辑：即：修复父级的问题：

div
{
    float:left;
    margin-left:-50px;
}
div div
{
    float:left;
    margin-left:50px;
}

- Mark Schultheiss

---

注意：这也会移动第一个 div 子元素，如果有问题，您可以在父元素上加上 -50px 的边距。 - Mark Schultheiss

Answer 4

弹性盒子

现在推荐使用弹性盒子，因为它是最简单和最容易的解决方案。

.parent{
  display:inline-flex;
}
.child{
  width:50px;
  height:50px;
  border:1px solid black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

- Spectric