경우 CSS3는 옵션이며, 이것은 CSS를 사용하여 수행 할 수있는 calc()기능을.
사례 1 : 한 줄에 상자 정렬 ( FIDDLE )
마크 업은 간단합니다-컨테이너 요소가있는 여러 div입니다.
CSS는 다음과 같습니다
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
어디 -1px가 IE9 + CALC / 반올림 버그를 해결하기 위해 - 참조 여기
사례 2 : 여러 줄에 상자 정렬 ( FIDDLE )
여기에는 calc()기능 이외에도 media queries필요합니다.
기본 아이디어는 각 #columns 상태에 대해 미디어 쿼리를 설정하는 것입니다. 여기서 calc ()를 사용하여 각 요소 (마지막 열의 요소 제외)에 대한 마진 오른쪽을 계산합니다.
이것은 많은 작업처럼 들리지만 LESS 또는 SASS를 사용하는 경우 매우 쉽게 수행 할 수 있습니다
(여전히 CSS로 할 수는 있지만 모든 계산을 수동으로 수행 한 다음 상자 너비를 변경하면 모든 것을 다시 해결해야합니다)
다음은 LESS를 사용하는 예는 다음과 같습니다 (당신은이 코드를 복사 / 붙여 넣기 할 수 있습니다 여기에 [그것은 또한 내가 언급 바이올린 위를 생성하는 데 사용되는 코드입니다, 그것으로 재생)
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
따라서 기본적으로 먼저 상자 너비와 상자 사이에 원하는 최소 여백을 결정해야합니다.
이를 통해 각 주에 필요한 공간을 계산할 수 있습니다.
그런 다음 calc ()를 사용하여 오른쪽 여백을 계산하고 n 번째 자식을 사용하여 마지막 열의 상자에서 오른쪽 여백을 제거하십시오.
허용되는 답변에 비해이 답변 의 장점 은 text-align:justify두 줄 이상의 상자가있을 때-마지막 행의 상자가 '정렬'되지 않는다는 것입니다. 예 : 마지막 행에 2 개의 상자가 남아있는 경우-I 첫 번째 상자가 왼쪽에 있고 다음 상자가 오른쪽에 있기를 원하지 않습니다. 오히려 상자가 순서대로 서로 따라갑니다.
브라우저 지원 과 관련하여 : 이것은 IE9 +, Firefox, Chrome, Safari 6.0 이상 에서 작동 합니다 (자세한 내용 은 여기 참조). 그러나 IE9 +에서는 미디어 쿼리 상태 사이에 약간의 결함이 있음을 알았습니다. [누군가이 문제를 해결하는 방법을 알고 있다면 정말로 알고 싶습니다 :)] <- 여기서 수정
display:inline-block;플로트 대신 하지 않습니까?