แบ่ง Div เป็น 2 คอลัมน์โดยใช้ CSS

ฉันพยายามแบ่ง div ออกเป็นสองคอลัมน์โดยใช้ CSS แต่ฉันยังไม่สามารถทำให้มันใช้งานได้ โครงสร้างพื้นฐานของฉันมีดังนี้:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

ถ้าฉันพยายามลอย div ด้านขวาและซ้ายไปยังตำแหน่งตามลำดับ (ขวาและซ้าย) ดูเหมือนว่าจะไม่สนใจสีพื้นหลังของ div ของเนื้อหา และรหัสอื่น ๆ ที่ฉันได้ลองจากเว็บไซต์ต่างๆดูเหมือนจะไม่สามารถแปลเป็นโครงสร้างของฉันได้

ขอบคุณสำหรับความช่วยเหลือ!

เมื่อคุณลอยทั้งสอง div เหล่านั้น div เนื้อหาจะยุบลงจนเหลือความสูงเป็นศูนย์ เพียงแค่เพิ่ม

<br style="clear:both;"/>

หลัง #right div แต่อยู่ใน div เนื้อหา ซึ่งจะบังคับให้ div เนื้อหาล้อมรอบ div ภายในทั้งสองแบบลอยตัว

สิ่งนี้ใช้ได้ดีสำหรับฉัน ฉันแบ่งหน้าจอออกเป็นสองครึ่ง: 20% และ 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

อีกวิธีในการทำเช่นนี้คือการเพิ่ม overflow:hidden;องค์ประกอบหลักขององค์ประกอบที่ลอย

ล้น: ซ่อนอยู่จะทำให้องค์ประกอบเติบโตขึ้นเพื่อให้พอดีกับองค์ประกอบที่ลอย

วิธีนี้สามารถทำได้ทั้งหมดใน css แทนที่จะเพิ่มองค์ประกอบ html อื่น

วิธีที่ยืดหยุ่นที่สุดในการดำเนินการนี้:

#content::after {
  display:block;
  content:"";
  clear:both;
}

สิ่งนี้ทำหน้าที่เหมือนกับการต่อท้ายองค์ประกอบใน # เนื้อหา:

<br style="clear:both;"/>

แต่ไม่ได้เพิ่มองค์ประกอบจริงๆ :: after เรียกว่าองค์ประกอบหลอก เหตุผลเดียวที่ดีกว่าการเพิ่มoverflow:hidden;ใน #content คือคุณสามารถมีองค์ประกอบลูกที่อยู่ในตำแหน่งที่แน่นอนมากเกินไปและยังคงมองเห็นได้ นอกจากนี้ยังช่วยให้ยังคงมองเห็นเงาของกล่องได้

ไม่มีคำตอบใดที่ให้คำตอบสำหรับคำถามเดิม

คำถามคือวิธีแยก div ออกเป็น 2 คอลัมน์โดยใช้ css

คำตอบทั้งหมดข้างต้นฝัง 2 div ลงใน div เดียวเพื่อจำลอง 2 คอลัมน์ นี่เป็นความคิดที่ไม่ดีเพราะคุณจะไม่สามารถส่งเนื้อหาไปยัง 2 คอลัมน์ในรูปแบบไดนามิกใด ๆ

ดังนั้นแทนที่จะใช้ข้างต้นให้ใช้ div เดียวที่กำหนดให้มี 2 คอลัมน์โดยใช้ CSS ดังนี้ ...

.two-column-div {
 column-count: 2;
}

กำหนดด้านบนเป็นคลาสให้กับ div และจะส่งเนื้อหาไปยัง 2 คอลัมน์ คุณสามารถไปเพิ่มเติมและกำหนดช่องว่างระหว่างระยะขอบได้เช่นกัน ขึ้นอยู่กับเนื้อหาของ div คุณอาจต้องยุ่งกับค่าตัวแบ่งคำเพื่อไม่ให้เนื้อหาของคุณถูกตัดระหว่างคอลัมน์

ไม่ว่าด้วยเหตุผลใดก็ตามที่ฉันไม่เคยชอบวิธีการหักบัญชีฉันอาศัยการลอยตัวและความกว้างเปอร์เซ็นต์สำหรับสิ่งนี้

นี่คือสิ่งที่ใช้ได้ผลในกรณีง่ายๆ:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

หากคุณใส่เนื้อหาลงไปคุณจะเห็นว่าใช้งานได้:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

คุณสามารถดูได้ที่นี่: http://cssdesk.com/d64uy

สร้างลูกหารinline-blockและพวกเขาจะวางตำแหน่งเคียงข้างกัน:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

ดูการสาธิต

ฉันรู้ว่าโพสต์นี้เก่า แต่หากคุณยังคงมองหาวิธีที่ง่ายกว่านี้

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

วิธีที่ดีที่สุดในการแบ่ง div ในแนวตั้ง -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

คุณสามารถใช้flexboxเพื่อควบคุมเค้าโครงขององค์ประกอบ div ของคุณ:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

ลอยไม่มีผลต่อการไหล สิ่งที่ฉันมักจะทำคือเพิ่มไฟล์

<p class="extro" style="clear: both">possibly some content</p>

ที่ส่วนท้ายของ 'การตัด div' (ในกรณีนี้คือเนื้อหา) ฉันสามารถปรับสิ่งนี้บนพื้นฐานความหมายโดยบอกว่าอาจจำเป็นต้องใช้ย่อหน้าดังกล่าว อีกวิธีหนึ่งคือการใช้ clearfix CSS:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

กลอุบายกับความคิดเห็นมีไว้สำหรับความเข้ากันได้ข้ามเบราว์เซอร์

ตรงนี้ตอบได้ดีที่สุด คำถาม 211383

ทุกวันนี้บุคคลที่เคารพตัวเองควรใช้แนวทาง "micro-clearfix" ที่ระบุไว้ในการล้างโฟลต

1. กำหนดขนาดตัวอักษรให้เท่ากับศูนย์ใน DIV หลัก

2. ตั้งค่า% ความกว้างสำหรับ DIV ลูกแต่ละตัว

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* ใน Safari คุณอาจต้องตั้งค่า 49% เพื่อให้ใช้งานได้

การแบ่งส่วนในสองคอลัมน์นั้นง่ายมากเพียงระบุความกว้างของคอลัมน์ของคุณให้ดีขึ้นหากคุณใส่สิ่งนี้ (เช่นความกว้าง: 50%) และตั้งค่า float: left สำหรับคอลัมน์ทางซ้ายและ float: right สำหรับคอลัมน์ด้านขวา