将 div 向右对齐，不使用浮点数答案

【问题标题】：Align div to right, without using float将 div 向右对齐，不使用浮点数
【发布时间】：2020-01-16 16:42:45
【问题描述】：

我想要三个气泡在彼此下方的图片上的结果 - 但是当我使用浮动执行此操作时，第三个也是最后一个元素与第二个保持浮动的元素对齐。如何使它正确浮动，而不使第三个元素对齐？

html:

<section class="javascript">
    <div class="js-wrapper">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>
<section class="javascript">
    <div class="js-wrapper2">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>
<section class="javascript">
    <div class="js-wrapper3">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>

css：

.js-wrapper {
   background-color: #8E8ABC;
   border-bottom-right-radius: 12em;
   border-top-right-radius: 12em;
   width: 40%;
}
.js-wrapper2 {
   background-color: #8AACBA;
   border-bottom-left-radius: 12em;
   border-top-left-radius: 12em;
   width: 40%;
   float: right;
}
.js-wrapper3 {
   background-color: #76B783;
   border-bottom-right-radius: 12em;
   border-top-right-radius: 12em;
   width: 40%;
}

【问题讨论】：

你想要之字形方法，比如左侧的 1,3,5,7,.. 和右侧的 2,4,6,8..？
第三个也是最后一个元素与第二个保持浮动的元素对齐哪个是第三个，哪个是最后一个元素？此外，当您浮动一个元素时，它会从文档流中取出，所有其他元素都会表现得好像它不存在一样，如果它的父级依赖于它的高度/宽度，它将折叠到0

标签： html css alignment

【解决方案1】：

在部分使用display:inline-block您的子元素

将text-align:right :nth-child(2n+2) 添加到您的.javascript 部分元素

.javascript:nth-child(2n+2) {
  text-align:right;
}

.js-wrapper {
    background-color: #8E8ABC;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper2 {
    background-color: #8AACBA;
    border-bottom-left-radius: 12em;
    border-top-left-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper3 {
    background-color: #76B783;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}

https://jsfiddle.net/lalji1051/qgfLnd1s/21/

【讨论】：

为什么2n+2 为什么不只是2n ？

【解决方案2】：

不使用浮点概念..

css

.javascript:nth-child(2n+2) {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}
.javascript {
    display: flex;
    display: -webkit-flex;
}

或

.javascript {
  clear: both;
}

【讨论】：

OP 说“不使用float”
您清除浮动的第一个答案是正确的答案。为什么要删除它？
我知道清算是正确的答案。但他们希望不使用浮动。Flex 也是最好的解决方案。
清除：两者；用于清除 div，这意味着它不会影响兄弟 div 样式
这个问题太令人困惑了，标题说 without using floats 并且在问题 How do I make it float right 中，我建议您编辑你的问题，并包括浮动的修复以及