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

Question

我有一个容器 div 和两个 child div 都带有 float: right 属性.

我的代码如下：

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

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

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

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

Answer 2

向右浮动您的元素将使最后的 div 排在最前面。尝试将它们都向左浮动。

.a, .b
{
float: left;
}

Answer 3

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

Answer 4

另一种解决方案是将子元素包装在一个标签中，然后将其浮动 :)，但这需要添加一个包装元素，并将您的子 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>

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

float:right in the correct order it appears in HTML code

html

css

css-float