如何在没有绝对定位的情况下将 DIV 右对齐或左对齐或居中对齐 CSS？

Question

我想根据它与容器右侧的距离，或与容器左侧的距离，或居中放置一些 DIV；但一切都没有将其排除在流程之外，就像 absolute 那样。

可能吗？

我唯一能做的就是居中。我不敢相信这不容易做到！

#outer {
    position: relative;
    width: 100%;
}

#first {
    position: relative;
    background-color: red;
    width: 100px;
    right: 10px;
}

#second {
    position: relative;
    background-color: green;
    width: 100px;
}

#third {
    position: relative;
    background-color: yellow;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

样本在这里：https://jsfiddle.net/dimskraft/vm3Lg835/8/

如果我做出 absolute 的位置，另一个 DIV 开始忽略绝对的位置...

更新

我想要的视觉解释：

更新 2

难以置信！

这个任务没有简单的解决方法吗？没有任何作弊/黑客攻击？？

我只想设置与右侧的距离。为什么我不能用 ONE 属性做到这一点？？？

Answer 1

已更新
根据您的需要添加margin-left: 100px;。它应该适合你。
看看

#outer {
    position: relative;
    width=100%;
}

#first {
    margin-left:350px;
    position: relative;
    background-color: red;
    width:100px;
    right:10px;
    float:left;
}

#second {
    position: relative;
    background-color: green;
    width:100px;
    float:left;
}

<div id="outer">
    
    <div id="first">&nbsp;</div>
    
    <div id="second">&nbsp;</div>
    
</div>

Answer 2

使用以下代码： HTML:

<div id="outer">
    <div id="first">&nbsp;</div>

    <div id="second">&nbsp;</div>

    <div class="clearboth"></div>
</div>

CSS:

#outer {
    position: absolute;
}

#first {
    background-color: red;
    width:100px;
    float: left;
}

#second {
    background-color: green;
    width:100px;
    float: right;
}

.clearboth
{
    clear: both;
}

Answer 3

我可能会把它包装在另一个有 text-align:right 的亲戚 div 中，然后先给 display:inline-block:

https://jsfiddle.net/aqvug8uj/2/

Answer 4

我认为这是最好的解决方案https://jsfiddle.net/vm3Lg835/6/

CSS

#outer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column; 
    flex-direction: column;
}

#first {
    background-color: red;
    width:100px;
    right:10px;
    align-self: flex-end;
    margin-right: 10px;
}

#second {
    background-color: green;
    width:100px;
}

Answer 5

这个按照你的要求做，保持流程和你原来的 html 结构。

我还添加了一个 "centered" div，您评论说可能需要它。

（根据要求，我在下面的示例中仅使用边距添加了第二组 3 个 div，这里还有一个 fiddle：http://jsfiddle.net/qxvoLr5u/2/）

html, body {
    margin: 0;
}

#outer {
    width: 100%;
    text-align: right;
}
#first {
    display: inline-block;
    width: 100px;
    background-color: red;
    text-align: left;
    margin-right: 10px;
}
#second {
    background-color: green;
    width:100px;
    text-align: left;
}
#third {
    display: inline-block;
    background-color: yellow;
    width:100px;
    text-align: left;
    position: relative;
    right: 50%;
    margin-right: -50px;
}

/* sample 2 */

#outer2 div:before {
    content: attr(class);
}
.div1 {
    width: 100px;
    margin-left: auto;
    margin-right: 10px;
    background-color: red;
}
.div2 {
    width: 100px;
    margin-right: auto;
    background-color: green;
}
.div3 {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}

<div id="outer">
    
    <div id="first">
        &nbsp;
    </div>
    
    <div id="second">
        &nbsp;
    </div>

    <div id="third">
        &nbsp;
    </div>
  
</div>

<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />

<div id="outer2">

  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>

</div>

Answer 6

老实说，我发现你的问题有点令人困惑。如果我理解正确的话，按照你描述的方式对齐东西很简单，甚至是微不足道的， float 和 clear.

#outer {
    width=100%;
}

#first {
    background-color: red;
    width:100px;

    float: right; 
    margin-right:10px;
}

#second {
    background-color: green;
    width:100px;

    clear: right;
}

#third {
    background-color: yellow;
    width:100px;

    margin-left: auto;
    margin-right: auto;
}

这是你想要达到的目标吗？这里是 the fiddle.

如何在没有绝对定位的情况下将 DIV 右对齐或左对齐或居中对齐 CSS？

How to align DIV right or left or center in CSS without absolute positioning?

css

css-position