float : 올바른 순서대로 HTML 코드에 표시됩니다.

Question

컨테이너 div와 두 개의 자식 div가 모두 float: right 속성으로 있습니다. 내 페이지에 [ [A][B]]을 볼 수, 의미 적

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

,하지만 난 그냥 내 HTML의 순서를 먼저 B를 넣을 수 있다는 것을 얻을 [ [B][A]]

로 표시됩니다 :

내 코드처럼 보인다 만약 내가 처음을보고 싶다면 그것은 의미 론적으로 정확하지 않습니다. 이 작업을 수행하는 적절한 방법은 무엇입니까?

Answer 1

당신은 인 flexbox을 사용할 수 있습니다

및

.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;에 자식 된 div를 설정하고 오른쪽으로 정렬 컨테이너에 text-align를 사용 justify-content: flex-end;.

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