如何在CSS中将DIV右对齐、左对齐或居中对齐，而不需要绝对定位？

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开始忽略绝对的DIV......

更新

我想要的视觉解释：

更新2

难以置信！

这个任务不是有简单的解决方案吗？没有任何作弊/黑客行为??

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

Answer 1

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

我还添加了一个“居中”div，您评论说可能需要它。

（根据要求，我在下面的示例中仅使用边距添加了第二组 3 个 div，这也是一个小提琴：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 2

我可能会将其包装在另一个具有

text-align:right

的相对 div 中，然后先给出

display:inline-block

:

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

Answer 3

我认为这是最好的解决方案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 4

说实话，我发现你的问题有点令人困惑。如果我理解正确的话，按照您描述的方式对齐内容很简单，甚至微不足道，使用

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

这是您想要实现的目标吗？这是小提琴。

Answer 5

只需为你的身体添加这两个属性：

body{ margin: 0px; padding: 0px; }

顺便说一句，我还应该提到，如果您为 div 使用了边距，那么这将不起作用，必须删除 div 上的边距

Answer 6

使用以下代码： 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 7

已更新
根据您的需要添加

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>