기본적으로 "text-align : justify"의 영향을 미치려고하지만 부동 블럭 요소를 사용하려고합니다. 나는 정당화하려는 많은 블록을 가지고 있습니다.유동 HTML 요소를 CSS로 정렬하는 방법이 있습니까?
e. 각 라인의 길이가 다르게되도록 수평 적으로 간격을 두어 배치합니다. (딱딱하지 않은 오른쪽 가장자리).
CSS로이 작업을 수행 할 수있는 방법이 있습니까? 그렇지 않다면 이것을 달성하기에 적합한 JS 라이브러리가 있습니까? 아니면 이것은 단지 실행 불가능한가?
항목이 실제로 float 인 경우, position:absolute; left:1em; right:1em을 사용하면 위치 지정된 상위 항목의 오프셋을 기반으로 항목의 너비를 계산할 수 있습니다.
흐름을 만들려고하는 블록 수준의 항목이 있기 때문에 float 만 사용하는 경우 부동 소수점 대신 부동 소수점에 display:inline-block을 사용하십시오. 부모 요소에 text-align:justify이 있으면이 효과를 얻을 수 있습니다 (상상해보십시오).
여기에 simple test이 표시되어 inline-block의 결과는 text-align:justify입니다.
편집 : 왼쪽 및 오른쪽 가장자리가 항상 마지막 줄을 제외하고 항상 정렬되어 있음을보다 명확하게 보여주기 위해 간단한 테스트를 업데이트했습니다.
변형 데모 : http://jsfiddle.net/mfmfR/2/ –
의도 한 효과이지만 IE7에서는 작동하지 않습니다. 나는 IE7 (http://jsfiddle.net/mfmfR/3/)을 위해 그것을 수정했고, 이것이 내가 찾고있는 대답 일 것 같아. 이 코드가 실제로 작동하는지 다시 한 번 확인해야합니다. 포인터 주셔서 감사! – rocketmonkeys
이것이 작동하지만 약간의 문제가 있습니다. 마지막 줄이 정렬되지 않습니다. 전체 맞춤과 마찬가지로이 문제에 대한 해결책이 있습니까? –
이전 답변을 완료하면 프로그래밍 방식으로 생성 된 DOM 노드를 정렬하려는 경우 (예 : javaScript에서 document.createElement 및 parentElement.appendChild 사용) 정렬 된 요소 사이에 공백이 추가되지 않습니다. 이로 인해 aligment가 작동하지 않을 수 있습니다.
https://jsfiddle.net/jc5qwyaw/
: div 요소를 분리하는 어떤 공백이없는 경우
, aligment이 작동하지 않습니다
https://jsfiddle.net/oa8yeudr/
당신이 주석 명령 wrapDiv.appendChild(document.createTextNode(" "));, 당신은 차이를 볼 수있는 경우 : I 자바 스크립트로 DOM 노드를 생성하는 예입니다. div 노드 다음에 공백 텍스트 노드를 추가 할 수 있습니다 (위의 예 참조).
Chrome 56.0.2924.87 및 Firefox 51.0.1 (64 비트)에서만 테스트되었습니다.
지금까지 해본 샘플이나 달성하려는 것의 모형을 게시하면 도움이됩니다. – Phrogz
그 블록들은 무엇입니까? 이미지? 또한, 그들은 같은 높이를 가지고 있습니까? –
display : inline-block을 떠 다니는 대신에 블록에 정의했다면 작동 할 것입니다. –