float: прямо в правильном порядке он отображается в HTML-коде

Question

У меня есть контейнер div и два дочерних divs с 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 и положить В первый если я хочу увидеть первый, но это не очень семантически правильно. Каков правильный способ сделать это?

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>

Или установить ребенок дивы в 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

Плавающий ваши элементы прямо закажет их с последним ДИВ первым. Попробуйте выложить их обоих.

.a, .b 
{ 
float: left; 
} 

Answer 3

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