유체 너비 컨테이너 DIV가 있습니다.
이 안에는 300px x 250px의 4 개의 DIV가 있습니다 …
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
내가 일어나고 싶은 것은 상자 1이 왼쪽에 떠 있고 상자 4가 오른쪽에 떠 있고 상자 2와 3이 균등하게 간격을 두는 것입니다. 브라우저가 작아 질수록 공간도 작아지기 때문에 간격이 유동적이기를 원합니다.
답변
참조 : http://jsfiddle.net/thirtydot/EDp8R/
- 이것은 IE6 + 및 모든 최신 브라우저 에서 작동 합니다!
- 작업하기 쉽도록 요청한 치수를 반으로 줄였습니다.
text-align: justify
와 함께.stretch
포지셔닝을 처리합니다.display:inline-block; *display:inline; zoom:1
inline-block
IE6 / 7의 수정 사항 은 여기를 참조하십시오 .font-size: 0; line-height: 0
IE6의 사소한 문제를 해결합니다.
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1,
.box2,
.box3,
.box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1,
.box3 {
background: #ccc
}
.box2,
.box4 {
background: #0ff
}
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
추가 span
( .stretch
)는으로 교체 할 수 있습니다 :after
.
이것은 여전히 위의 솔루션과 동일한 모든 브라우저에서 작동 합니다. :after
IE6 / 7에서는 작동하지 않지만 distribute-all-lines
어쨌든 사용 하고 있으므로 중요하지 않습니다.
참조 : http://jsfiddle.net/thirtydot/EDp8R/3/
에 약간의 단점있다 :after
: Safari에서 완벽하게 마지막 행 작업을 할, 당신은 HTML의 공백을 조심해야합니다.
특히 이것은 작동하지 않습니다.
<div id="container">
..
<div class="box3"></div>
<div class="box4"></div>
</div>
그리고 이것은 :
<div id="container">
..
<div class="box3"></div>
<div class="box4"></div></div>
변경하여 각 클래스를 div
추가하지 않고도 임의의 수의 자식에 대해 이것을 사용할 수 있습니다boxN
.box1, .box2, .box3, .box4 { ...
에
#container > div { ...
이것은 div의 첫 번째 자식 인 #container
div를 선택하고 그 아래의 다른 div 는 선택하지 않습니다. 배경색을 일반화 하기 위해 CSS3 n-order selector를 사용할 수 있지만 IE9 + 및 기타 최신 브라우저에서만 지원됩니다.
.box1, .box3 { ...
된다 :
#container > div:nth-child(odd) { ...
답변
가장 쉬운 방법은 flexbox를 사용하는 것입니다.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS는 다음과 같습니다.
#container {
display: flex;
justify-content: space-between;
}
데모 : http://jsfiddle.net/QPrk3/
그러나 이는 현재 비교적 최신 브라우저 ( http://caniuse.com/flexbox ) 에서만 지원됩니다 . 또한 flexbox 레이아웃 사양이 몇 차례 변경되었으므로 이전 구문을 추가하여 더 많은 브라우저를 사용할 수 있습니다.
답변
경우 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 +에서는 미디어 쿼리 상태 사이에 약간의 결함이 있음을 알았습니다. [누군가이 문제를 해결하는 방법을 알고 있다면 정말로 알고 싶습니다 :)] <- 여기서 수정
답변
다른 게시물에서 flexbox에 대해 언급 했지만 두 개 이상의 항목 행이 필요한 경우 flexbox의 space-between
속성 이 실패합니다 (포스트 끝 참조)
현재까지 이것에 대한 유일한 해결책은
CSS 그리드 레이아웃 모듈 ( 코드 펜 데모 )
기본적으로 필요한 관련 코드는 다음과 같습니다.
ul {
display: grid; /* (1) */
grid-template-columns: repeat(auto-fit, 120px); /* (2) */
grid-gap: 1rem; /* (3) */
justify-content: space-between; /* (4) */
align-content: flex-start; /* (5) */
}
1) 컨테이너 요소를 그리드 컨테이너로 만듭니다.
2) 필요에 따라 ‘자동’열로 그리드를 설정하십시오. 반응 형 레이아웃을 위해 수행됩니다. 각 열의 너비는 120px입니다. (의 사용을 참고 auto-fit
(에 나란히 놓이는으로 auto-fill
) 0 빈 트랙을 붕괴 1 행 레이아웃에있는 () -. 남은 공간을 차지하기 위해 확장 할 항목을 허용 (체크 아웃 이 데모를 내가 무슨 말보고 )).
3) 그리드 행과 열에 간격 / 홈통을 설정하십시오. 여기에는 ‘공간 간격’레이아웃 이 필요하므로 간격 이 필요한만큼 커지므로 실제로 간격이 최소 간격 이됩니다.
4) 및 5)-flexbox와 유사합니다.
body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
grid-gap: 1rem;
justify-content: space-between;
align-content: flex-start;
/* boring properties: */
list-style: none;
width: 90vw;
height: 90vh;
margin: 2vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
height: 120px;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
코덱 데모 (효과를 보려면 크기 조정)
브라우저 지원 -Caniuse
현재 Chrome (Blink), Firefox, Safari 및 Edge에서 지원됩니다! … IE의 일부 지원 ( Rachel Andrew 의이 게시물 참조 )
NB :
Flexbox의 space-between
속성은 한 행의 항목에 대해 효과적이지만 flex-wrap: wrap
, 마지막 줄의 정렬을 제어 할 수 없기 때문에 해당 항목을 감싸는 Flex 컨테이너에 적용하면 (와 함께 ) 실패합니다. 마지막 행은 항상 정당화됩니다 (보통 원하는 것이 아닙니다)
시연하려면 :
Codepen (내가 말하는 것을보기 위해 크기 조정)
CSS 그리드에 대한 추가 정보 :
답변
이것은 다른 크기의 5 이미지로 저에게 효과적이었습니다.
- 컨테이너 사업부 만들기
- 이미지의 순서가없는 목록
- CSS에서는 부호가없는 세로로 표시하고 글 머리 기호가 없어야합니다.
- 컨테이너 div의 내용을 정당화하십시오.
이것은 justify-content : space-between으로 작동하며 목록에 있으며 가로로 표시됩니다.
CSS에서
#container {
display: flex;
justify-content: space-between;
}
#container ul li{ display:inline; list-style-type:none;
}
html에서
<div id="container">
<ul>
<li><img src="box1.png"><li>
<li><img src="box2.png"><li>
<li><img src="box3.png"><li>
<li><img src="box4.png"><li>
<li><img src="box5.png"><li>
</ul>
</div>
답변
에 jQuery
당신이 직접 부모를 대상으로 수 있습니다.
이는 많은 어린이들이 동적으로 추가되는 방법을 정확히 알지 못하거나 자신의 숫자를 알 수없는 경우에 유용합니다.
var tWidth=0;
$('.children').each(function(i,e){
tWidth += $(e).width();
///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);
})
$('#parent').css('width',tWidth);
이것은 구부러짐에 parent
따라 수평으로 자랄 수 있습니다 children
.
참고 : 이것은 '.children'
a width
및 Height
Set
도움이 되길 바랍니다.
답변
“행”당 요소 수와 컨테이너 너비를 알고 있으면 선택기를 사용하여 요소에 여백을 추가하여 정당한 모양을 만들 수 있습니다.
나는 정당화하고 싶었던 세 div의 행을 가지고 있었으므로 다음을 사용했다.
.tile:nth-child(3n+2) { margin: 0 10px }
이렇게하면 각 행의 가운데 div에 1 및 3 div를 컨테이너의 바깥 쪽 가장자리로 강제하는 여백이 생길 수 있습니다
테두리 배경색 등과 같은 다른 것들에도 좋습니다.