등간격 DIV가 있는 유체 폭

등간격 DIV가 있는 유체 폭

저는 유동 폭 컨테이너 DIV를 가지고 있습니다.

이 안에 4개의 DIV가 있어 300pxx250px...

<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-blockIE6/7의 경우 여기를 참조하십시오.
• font-size: 0; line-height: 0IE6에서 사소한 문제를 해결합니다.

#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.

이는 위의 솔루션과 동일한 모든 브라우저에서 여전히 작동합니다.:afterIE6/7에서는 작동하지 않지만, 그들은 사용하고 있습니다.distribute-all-lines어쨌든 상관없습니다.

참조: http://jsfiddle.net/thirtydot/EDp8R/3/

다음과 같은 작은 단점이 있습니다.:after사파리에서을 주의해야 . :에서 이 하게 하도록 을 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 { ...

를 인 합니다 를 인 합니다 은 #container디브, 그리고 그 아래에 다른 사람들은 없습니다.배경색을 일반화하려면 IE9+ 및 기타 최신 브라우저에서만 지원되지만 CSS3 n차 선택기를 사용할 수 있습니다.

.box1, .box3 { ...

다음이 됩니다.

#container > div:nth-child(odd) { ...

js fiddle 예제는 여기를 참조하십시오.

이제 가장 쉬운 방법은 플렉스박스를 사용하는 것입니다.

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) 에서만 지원됩니다.또한 플렉스박스 레이아웃 사양이 몇 번 변경되었기 때문에 더 오래된 구문을 추가로 포함하여 더 많은 브라우저를 커버할 수 있습니다.

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

css3가 옵션인 경우 css를 사용하여 수행할 수 있습니다.calc()기능.

사례 1: 한 줄에 상자 정당화하기 (FIDDLE)

마크업은 간단합니다. 컨테이너 요소가 있는 디브들입니다.

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/rounding 버그를 수정합니다 - 여기를 참조하십시오.

사례 2: 여러 줄의 상자를 정당화하기 (FIDDLE)

에 에 , 에.calc()능.media queries꼭 필요합니다.

기본 아이디어는 각 #컬럼 상태에 대한 미디어 쿼리를 설정하는 것입니다. 그런 다음 calc()를 사용하여 각 요소(마지막 열의 요소 제외)의 여백 오른쪽을 계산합니다.

작업량이 많을 것 같지만 LESS 또는 SASS를 사용하는 경우 이 작업을 쉽게 수행할 수 있습니다.

(여전히 일반 cs로 가능하지만, 모든 계산을 수동으로 해야하고, 박스 폭을 변경하면 다시 모든 계산을 해야합니다.)

아래는 LESS: (여기에 이 코드를 복사/붙여넣어 가지고 놀 수 있으며, [위에서 언급한 fiddle을 생성할 때 사용한 코드이기도 합니다.])

@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상자가 한 줄 이상 있을 때 - 마지막 줄에 있는 상자는 '정당화'되지 않습니다. 예: 마지막 줄에 상자가 두 개 남아 있을 경우 - 첫 번째 상자가 왼쪽에 있고 다음 상자가 오른쪽에 있는 것이 아니라 상자가 순서대로 따라오는 것을 원합니다.

브라우저 지원 관련: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다가에오f오ee(다e각는0의elfe0nph(pauto-fit(에는)는 반대로auto-fill(1행 레이아웃의 경우) 빈 트랙을 0으로 접습니다. - 항목을 확장하여 나머지 공간을 차지하도록 합니다.(이 데모를 확인하여 제가 무슨 말을 하는지 확인해 보십시오.)

3) 그리드 행과 열에 간격/구터를 설정합니다. 여기서는 '공간 사이' 레이아웃을 원하므로 간격이 필요에 따라 증가하므로 실제로 간격이 최소 간격이 됩니다.

4) 5) - 플렉스박스와 유사합니다.

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>

코드펜 데모(효과를 보려면 크기 조정)

---

브라우저 지원 - 캐니유즈

현재 Chrome(Blink), Firefox, Safari 및 Edge에서 지원 중이며 IE에서 부분적으로 지원됨 (Rachel Andrew의 이 게시물 참조)

---

NB:

space-between은 한 항목에 - (은의만을는스에할우함한에-(우 - )flex-wrap: wrap) - 항목의 마지막 행 정렬을 제어할 수 없기 때문에 실패합니다. 마지막 행은 항상 정당화됩니다(일반적으로 원하는 것이 아님)

시연 방법:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

코데펜 (내가 무슨 말을 하는지 보려면 크기를 조정

---

CSS 그리드에 대한 추가 판독:

• MDN
• Jen Simmons - CSS 그리드 학습
• CSS 그리드에 대한 완전한 가이드 | Codrops CSS
• 그리드에 대한 완전한 가이드 - CSS 트릭

사이즈가 다른 5개의 이미지로 효과가 있었습니다.

1. 컨테이너 디바 만들기
2. 이미지에 대한 순서 없는 목록
3. CSS에서는 정렬되지 않은 것을 수직으로 표시하고 총알 없이 표시해야 합니다.
4. 컨테이너 div의 내용을 정당화합니다.

이것은 정당성-내용:공간-사이 때문에 작동하며 목록에 있고 수평으로 표시됩니다.

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으로 성장하여wchildren벵어가 추가되었습니다.

은 : 은 을 합니다 합니다를 합니다.'.children'을 가지다width그리고.Height

도움이 되기를 바랍니다.

"행"당 요소의 수와 컨테이너의 너비를 알고 있다면 선택기를 사용하여 정당한 모양을 만드는 데 필요한 요소에 여백을 추가할 수 있습니다.

나는 내가 정당화되기를 원하는 3개의 디브 줄을 가지고 있었기 때문에 다음을 사용했습니다.

.tile:nth-child(3n+2) { margin: 0 10px }

이것은 각 행의 중심 디브가 용기의 바깥쪽 가장자리에 1번째와 3번째 디브를 강제하는 여백을 갖도록 합니다.

또한 테두리 배경색 등 다른것에도 좋습니다.

언급URL : https://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs