float:right 以正确的顺序出现在 HTML 代码中答案

【问题标题】：float:right in the correct order it appears in HTML codefloat:right 以正确的顺序出现在 HTML 代码中
【发布时间】：2022-01-11 19:16:27
【问题描述】：

我有一个容器 div 和两个具有 float: right 属性的子 div。

我的代码如下：

<div class="container">               .container {width: 50%}
   <div class="a"></div>              .a, .b { float: right }
   <div class="b"></div>
</div>

从语义上讲，我应该在我的页面上看到 [ [A][B]]，但它显示为 [ [B][A]]

我知道如果我想先看到 A，我可以重新排序我的 HTML 并将 B 放在第一位，但这在语义上并不真正正确。这样做的正确方法是什么？

【问题讨论】：

因为您的 [A] 在 [B] 之前。它之前也在浮动。您可以使用 display flex 或 display inline-block。
有可能您还希望.a,.b 的宽度为 50%
是的，但为了简单起见，我在这个问题上省略了这些

标签： html css css-float

【解决方案1】：

你可以使用 flexbox 和justify-content: flex-end;

.container {
  background: #eee;
  width: 50%;
  display: flex;
  justify-content: flex-end;
}

<div class="container">               
   <div class="a">a</div>
   <div class="b">b</div>
</div>

或者将子div设置为display: inline-block;并在容器上使用text-align向右对齐。

.container {
  background: #eee;
  width: 50%;
  text-align: right;
}
.container > div {
  display: inline-block;
}

<div class="container">               
   <div class="a">a</div><div class="b">b</div>
</div>

另一种解决方案是引入一个新元素来包装子元素，将新元素向右浮动，然后将子元素向左浮动。

.container {
  background: #eee;
  width: 50%;
  text-align: right;
  overflow: auto;
}
.inner {
  float: right;
}
.inner > div {
  float: left;
}

<div class="container">
  <div class="inner">
    <div class="a">a</div>
    <div class="b">b</div>
  </div>
</div>

【讨论】：

谢谢，弹性答案有效。内联块没有，因为 div 更复杂并且有边框和填充
@penu 太棒了，不客气。顺便说一句，您可以在 inline-block 元素上使用边框和填充。
太棒了！我最喜欢你更新后的解决方案，效果很好
@penu 甜！ :)

【解决方案2】：

.container {
  width: 100%;
}
.container div {
  float:right;
  width: 50%;
}

【讨论】：

【解决方案3】：

另一种解决方案是将子元素包装在标签中，并将其浮动:)，但这取决于添加包装元素，并将您的子 div 标签转换为内联块。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <style>
        .container {
            width: 30%;
        }

        .c {
            float: right;
        }

        .a, .b {
            display: inline;
        }
    </style>
</head>
<body>
    <div style="margin-left:20px;">

        <div class="container">
            <div class="c">
                <div class="a">a</div>
                <div class="b">b</div>
            </div>
        </div>

    </div>
</body>
</html>

【讨论】：

【解决方案4】：

向右浮动您的元素将首先使用最后一个 div 对它们进行排序。尝试将它们都向左浮动。

.a, .b
{
float: left;
}

【讨论】：

这将显示 [[A][B] ] 而不是 [ [A][B]] 这是我想要的
@penu 您打算填补多余的空间吗？喜欢[[A][B]]
如果你想将 [A][B] 浮动到容器 div 的右侧......试试container{float:right;]
不，不是我想要的