div를 다른 부모 div에서 다른 너비로 정렬하는 방법은 무엇입니까?

Question

이 이미지는 무슨 뜻인지 설명 할 것입니다 :

가 빨간색 더미 텍스트가 다른 모든 작은 어두운 회색 된 div를 포함하는 투명 사업부가,

을 나는 부모 DIV 설정

width:80%; 
    height:100%; 
    margin: auto; 
    padding:0 0 0px; 

과에 자식 div의 내부 여기에 텍스트의 길이에 따라 폭 그들의 폭 변화하지 일치는 CSS

입니다

float:left; 
width:auto; 
height:1.5em; 
display: inline-block; 

이제 새로운 하위 div가 만들어지면 부모 div의 왼쪽에서 완벽하게 정렬되지만 오른쪽에서는 부모 div의 끝에 전혀 정렬되지 않습니다 (예 : 이미지) 그들은 더러워 보입니다. 그것을 수행하는 방법은 CSS 또는 Javascript 만 있으면 가능합니까?

<div id="parent"><span class="child"></span></div> 

Answer 1

: 것을주의

.container { 
 
    background: #333; 
 
    padding: 14px; 
 
    font-size:0; 
 
    text-align:justify; 
 
} 
 
.container div { 
 
    display:inline-block; 
 
    margin:4px; 
 
    background: #111; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
    line-height: 1em; 
 
    color: red; 
 
    font-size:16px; 
 
}

<div class="container"> 
 
    <div>Maecenas faucibus</div> 
 
    <div>mollis</div> 
 
    <div>interdum</div> 
 
    <div>Nullam</div> 
 
    <div>id</div> 
 
    <div>dolor</div> 
 
    <div>id nibh ultricies</div> 
 
    <div>vehicula</div> 
 
    <div>ut</div> 
 
    <div>id</div> 
 
    <div>elit</div> 
 
    <div>mollis</div> 
 
    <div>interdum</div> 
 
    <div>Nullam</div> 
 
    <div>id</div> 
 
    <div>dolor</div> 
 
    <div>faucibus</div> 
 
    <div>id nibh ultricies</div> 
 
    <div>vehicula</div> 
 
    <div>ut id</div> 
 
    <div>elit</div> 
 
    <div>dolor</div> 
 
    <div>id nibh ultricies</div> 
 
    <div>vehicula ut</div> 
 
    <div>mollis</div> 
 
    <div>interdum</div> 
 
    <div>Nullam</div> 
 
    <div>id</div> 
 
    <div>dolor</div> 
 
    <div>faucibus</div> 
 
    <div>id nibh ultricies</div> 
 
    <div>vehicula</div> 
 
    <div>ut id elit</div> 
 
</div>

그것의 가치 플렉스 박스의 justify-content: space-between과 달리 text-align:justify 속성은 최종 행을 정당화하지 않습니다.

Answer 2

당신이 무엇을 요구하는지 말할 수는 없지만 플렉스 레이아웃을 사용할 수 있습니까? 부모 DIV의 CSS에

:

display: flex; justify-content: space-between; flex-wrap: wrap;

당신은 아이들의 float: left; 필요하지 않습니다.

바이올린 샘플 : 이미 당신은 단순히과 같이 부모 컨테이너에 text-align:justify을 사용할 수 있습니다 언급 한 플렉스 박스 솔루션에서 제외 https://jsfiddle.net/c0nduj9r/