ความกว้างของของไหลที่มี DIV เว้นระยะเท่ากัน

ฉันมีภาชนะบรรจุความกว้างของของเหลว DIV

ภายในนี้ฉันมี 4 DIVs ทั้งหมด 300px x 250px ...

<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 ใด ๆ ที่เป็นลูกคนแรกของ#containerdiv และไม่มีคนอื่นอยู่ด้านล่าง ในการทำให้สีพื้นหลังทั่วไปคุณสามารถใช้ตัวเลือกลำดับที่ 3 ของ CSS3แม้ว่าจะรองรับเฉพาะใน IE9 + และเบราว์เซอร์สมัยใหม่อื่น ๆ :

.box1, .box3 { ...

กลายเป็น:

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

ดูที่นี่สำหรับตัวอย่าง jsfiddle

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือด้วย 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 ) นอกจากนี้ข้อมูลจำเพาะสำหรับรูปแบบเฟล็กบ็อกซ์มีการเปลี่ยนแปลงสองสามครั้งดังนั้นจึงเป็นไปได้ที่จะครอบคลุมเบราว์เซอร์มากขึ้นโดยรวมถึงไวยากรณ์ที่เก่ากว่า:

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

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

หากcss3เป็นตัวเลือกสามารถทำได้โดยใช้calc()ฟังก์ชันcss

กรณีที่ 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 + / การปัดเศษ - ดูที่นี่

กรณีที่ 2: จัดชิดขอบกล่องในหลายบรรทัด ( FIDDLE )

ที่นี่นอกเหนือจากcalc()ฟังก์ชั่นmedia queriesมีความจำเป็น

แนวคิดพื้นฐานคือการตั้งค่าคิวรีสื่อสำหรับแต่ละ #columns ซึ่งฉันใช้ calc () เพื่อคำนวณระยะขอบขวาบนแต่ละองค์ประกอบ (ยกเว้นคอลัมน์ในคอลัมน์สุดท้าย)

ฟังดูเหมือนทำงานมาก แต่ถ้าคุณใช้ LESS หรือ SASS สามารถทำได้ค่อนข้างง่าย

(มันสามารถทำได้ด้วย css ปกติ แต่จากนั้นคุณจะต้องทำการคำนวณทั้งหมดด้วยตนเองและถ้าคุณเปลี่ยนความกว้างของกล่อง - คุณต้องคำนวณทุกอย่างอีกครั้ง)

ด้านล่างเป็นตัวอย่างการใช้น้อย: (คุณสามารถคัดลอก / วางรหัสนี้ที่นี่เพื่อเล่นกับมัน [มันเป็นรหัสที่ฉันใช้ในการสร้างซอดังกล่าวข้างต้น])

@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-child เพื่อลบระยะขอบด้านขวาออกจากกล่องในคอลัมน์สุดท้าย

ประโยชน์ของคำตอบมากกว่านี้คำตอบที่ได้รับการยอมรับที่ใช้text-align:justifyก็คือว่าเมื่อคุณมีมากกว่าหนึ่งแถวของกล่อง - กล่องในแถวสุดท้ายไม่ได้รับ 'ธรรม' เช่นถ้ามี 2 กล่องที่เหลืออยู่ในแถวสุดท้าย - ฉัน ไม่ต้องการให้กล่องแรกอยู่ทางซ้ายและอีกอันอยู่ทางขวา แต่ให้ทำตามกันตามลำดับ

เกี่ยวกับการรองรับเบราว์เซอร์ : สิ่งนี้จะทำงานบน IE9 +, Firefox, Chrome, Safari6.0 + - (ดูที่นี่สำหรับรายละเอียดเพิ่มเติม) อย่างไรก็ตามฉันสังเกตเห็นว่าใน IE9 + มีข้อผิดพลาดเล็กน้อยระหว่างสถานะการสืบค้นสื่อ [ถ้ามีคนรู้วิธีแก้ไขปัญหานี้ฉันอยากรู้ :)] <- คงที่นี่

โพสต์อื่น ๆ ได้กล่าวถึงflexboxแต่ถ้าจำเป็นต้องมีมากกว่าหนึ่งแถวรายการspace-betweenทรัพย์สินของ flexbox จะล้มเหลว (ดูที่ท้ายโพสต์)

ในวันที่ทางออกที่สะอาดเท่านั้นสำหรับเรื่องนี้คือกับ

โมดูล CSS กริดเค้าโครง ( ตัวอย่าง Codepen )

โดยทั่วไปจำเป็นต้องใช้รหัสที่เกี่ยวข้องกับสิ่งนี้:

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) ซึ่ง (สำหรับเลย์เอาต์ 1 แถว) ยุบแทร็กที่ว่างเปล่าเป็น 0 - ทำให้รายการขยายเพื่อใช้พื้นที่ที่เหลือ (ดูตัวอย่างนี้เพื่อดูสิ่งที่ฉันกำลังพูดถึง ))

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>

Codepen สาธิต (ปรับขนาดเพื่อดูผล)

สนับสนุนเบราว์เซอร์ - Caniuse

รองรับ Chrome (กะพริบ), Firefox, Safari และ Edge ในปัจจุบัน! ... ด้วยการสนับสนุนบางส่วนจาก IE (ดูโพสต์นี้โดย Rachel Andrew)

หมายเหตุ:

space-betweenคุณสมบัติของ Flexbox ใช้งานได้ดีสำหรับหนึ่งแถวของไอเท็ม แต่เมื่อนำไปใช้กับเฟล็กซ์คอนเทนเนอร์ซึ่งล้อมรอบมันเป็นไอเท็ม - (พร้อม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>

Codepen (ปรับขนาดเพื่อดูสิ่งที่ฉันกำลังพูดถึง)

อ่านเพิ่มเติมเกี่ยวกับกริด CSS:

• MDN
• Jen Simmons - เรียนรู้ตาราง CSS
• คำแนะนำฉบับสมบูรณ์เกี่ยวกับ CSS Grid | การอ้างอิง CSS ของ Codrops
• คู่มือฉบับสมบูรณ์เกี่ยวกับ Grid - CSS Tricks

สิ่งนี้ใช้ได้กับฉันด้วย 5 ภาพในขนาดที่แตกต่างกัน

1. สร้างกองคอนเทนเนอร์
2. รายการที่ไม่เรียงลำดับสำหรับรูปภาพ
3. บน css จะต้องไม่มีการเรียงลำดับในแนวตั้งและไม่มีสัญลักษณ์แสดงหัวข้อย่อย
4. ปรับเนื้อหาของคอนเทนเนอร์ div

สิ่งนี้ได้ผลเพราะ justify-content: ช่องว่างระหว่างและอยู่ในรายการแสดงในแนวนอน

บน 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'มีwidthและHeightตั้ง

หวังว่าจะช่วย

หากคุณทราบจำนวนองค์ประกอบต่อ "แถว" และความกว้างของคอนเทนเนอร์คุณสามารถใช้ตัวเลือกเพื่อเพิ่มระยะขอบให้กับองค์ประกอบที่คุณต้องทำให้เกิดลักษณะที่เป็นธรรม

ฉันมีแถวของสาม divs ที่ฉันต้องการให้เป็นธรรมใช้:

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

สิ่งนี้ทำให้ div กลางในแต่ละแถวมีระยะขอบที่บังคับให้ div 1 และ 3 ไปที่ขอบด้านนอกของคอนเทนเนอร์

ยังยอดเยี่ยมสำหรับสิ่งอื่น ๆ เช่นสีพื้นหลังของเส้นขอบ ฯลฯ