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

我可能会将它包装在另一个有CTRL + Shift + C的相对div中，然后先给text-align:right：

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

Answer 2

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

我还添加了一个以＃34;为中心的＃34;你可能需要评论的div。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

这是你想要实现的吗？这是the fiddle。

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

6 个答案: