จะรับ div สองตัวนี้เคียงข้างกันได้อย่างไร?

110

ฉันมีสอง div ที่ไม่ได้ซ้อนกันอันหนึ่งอยู่ด้านล่างอีกอัน ทั้งคู่อยู่ใน div พาเรนต์เดียวและ div พาเรนต์นี้ซ้ำตัวเอง โดยพื้นฐานแล้ว:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

ฉันต้องการที่จะได้รับแต่ละคู่ของchild_div_1และchild_div_2ติดกัน ฉันจะทำเช่นนี้ได้อย่างไร?

css layout html

— จัสตินเมลท์เซอร์
แหล่งที่มา

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

ตรวจสอบตัวอย่างการทำงานที่http://jsfiddle.net/c6242/1/

— ฮุสเซน
แหล่งที่มา

1

เขาต้องการให้เด็กแบ่งข้างกันไม่ใช่พ่อแม่ (อย่างน้อยก็เป็นความเข้าใจของฉัน ... )

— ehdv

4

ฉันยังคิดว่าdisplay: table-cellจะได้ผลลัพธ์ที่ใกล้เคียงกับสิ่งที่เขาหมายถึง (ตั้งแต่นั้นเป็นต้นมาก็จะมีความสูงเท่ากันเป็นต้น) แต่วิธีนี้จะได้ผลอย่างแน่นอน

— ehdv

display: table-cellไม่รองรับ@ehdv ใน IE6 IE7 ลอย: ซ้าย; เป็นวิธีที่เหมาะสมในการดำเนินการนี้

— Hussein

จริงๆแล้ววิธีที่เหมาะสมในการทำเช่นนี้ใน IE6,7 คือด้วย<tr><td>เนื่องจากตัวเลือกอื่น ๆ จะหยุดทำงานเมื่อผู้ใช้ปรับขนาดหน้าต่าง ในเบราว์เซอร์สมัยใหม่display: inline-blockมักเป็นตัวเลือกที่ดีที่สุด

— John Henckel

126

เนื่องจากโดยค่าเริ่มต้นของ div เป็นblockองค์ประกอบ - หมายความว่าจะใช้ความกว้างเต็มที่มีอยู่ให้ลองใช้ -

display:inline-block;

divมีการแสดงในขณะนี้คืออินไลน์ไม่รบกวนการไหลขององค์ประกอบ แต่จะยังคงได้รับการปฏิบัติเป็นองค์ประกอบบล็อก

ฉันพบว่าเทคนิคนี้ง่ายกว่าการต่อสู้กับfloats

ดูกวดวิชานี้มานาน - http://learnlayout.com/inline-block.html ฉันอยากจะแนะนำแม้แต่บทความก่อนหน้านี้ที่นำไปสู่บทความนั้น (ไม่ฉันไม่ได้เขียน)

— โรบินมาเบน
แหล่งที่มา

ฉันชอบโซลูชันนี้มาก ปัญหาเดียวของฉันคือการจัดแนวด้านล่างของ div ทั้งสองแทนที่จะจัดแนวด้านบน มีการตั้งค่าด่วนสำหรับสิ่งนี้ด้วยหรือไม่?

— คริส

ฉันขอแนะนำให้ใช้กระดาษห่อหุ้ม 2 อันdivที่มีความสูงเท่ากันดังนั้นเนื้อหาที่อยู่ในนั้นจะดูเหมือนว่าอยู่ในแนวบนสุด

— Robin Maben

2

ฉันเห็นด้วย. สิ่งนี้ดีกว่ามากfloat:leftเพราะมีตัวเลือกมากมายให้คุณโดยไม่ต้องกำหนดเค้าโครงใหม่ทั้งหมด สิ่งต่างๆ "ใช้ได้ผล" ด้วยวิธีนี้ ดูได้ที่นี่: jsfiddle.net/SrAQd/4

— Jerry

12

เพื่อให้ได้การจัดแนวแนวตั้งฉันจะเพิ่ม "vertical-align: top;"

— cdiggins

@ คริส: ใช่ฉันเห็นด้วยกับ cdiggins นั่นน่าจะช่วยคุณได้

— Robin Maben

44

ฉันพบว่าโค้ดด้านล่างมีประโยชน์มากซึ่งอาจช่วยทุกคนที่มาค้นหาที่นี่

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

ขยายข้อมูลโค้ด

— ขวาน
แหล่งที่มา

11

การใช้ flexbox นั้นง่ายมาก!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

ตัวอย่างซอ

— โซล
แหล่งที่มา

6

การใช้สไตล์

.child_div_1 {
    float:left
}

— amit_g
แหล่งที่มา

5

ดีที่สุดสำหรับฉัน:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
แหล่งที่มา

2

float:leftคุณสมบัติผู้ใช้ในคลาส div ลูก

ตรวจสอบโครงสร้าง div โดยละเอียด: http://www.dzone.com/links/r/div_table.html

— ปรัญญาราณา
แหล่งที่มา

2

ใช้ flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
แหล่งที่มา