3 วิธีในการแสดงสอง divs เคียงข้างกัน (float, flexbox, CSS grid)

3 วิธีที่คุณใช้ CSS เพื่อวางองค์ประกอบ HTML div เคียงข้างกัน

(คลิกเพื่อข้ามไปยังแต่ละส่วน)

• วิธีการลอย
• วิธีเฟล็กซ์บ็อกซ์
• วิธีกริด CSS

วิธีการลอย

ในวิธี float เราจะใช้มาร์กอัป HTML ต่อไปนี้:

<div class="float-container">

  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
  
</div>

.float-container เป็นเพียงองค์ประกอบหลักที่มีทั้ง .float-child องค์ประกอบ

เพื่อให้ได้ div เคียงข้างกัน เราจะใช้กฎ CSS ต่อไปนี้:

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

รหัสผลลัพธ์จะมีลักษณะดังนี้:

ฉันได้เพิ่มเส้นขอบและช่องว่างภายในให้กับ div เพื่อให้คุณเห็นว่าเกิดอะไรขึ้นได้ง่ายขึ้น ขอบสีขาวทึบที่หนากว่าด้านนอกคือ .float-container div ซึ่งมีช่องว่างภายใน 20px

แล้วแต่ละ .float-child องค์ประกอบมีขอบสีแดงที่บางกว่าและมีช่องว่างภายในเพิ่มเติม จากนั้นบล็อคสีจริงเป็นองค์ประกอบย่อยของ .float-child องค์ประกอบ (คุณจะเห็นเหตุผลในอีกสักครู่)

ในการวางตำแหน่ง divs เคียงข้างกัน เราใช้ float คุณสมบัติที่จะลอยแต่ละ .float-child องค์ประกอบทางซ้าย

เนื่องจากทั้งคู่ลอยไปทางซ้าย จึงจะแสดงเคียงข้างกันหากมีที่ว่างเพียงพอสำหรับทั้งคู่ เหมาะสมเพราะเรามี .float-child . สองตัว divs แต่ละรายการมีความกว้าง 50%

และช่องว่างระหว่าง div จะถูกสร้างขึ้นโดยการเพิ่มช่องว่างภายในในแต่ละ .float-child div ซึ่งจะมีบล็อคสี

เพิ่มช่องว่างระหว่างคอลัมน์โดยการซ้อนแต่ละคอลัมน์ใน div ภายนอก

บล็อคสีต้องมี div ภายนอก (.float-child ) เพื่อเพิ่มพื้นที่และให้บล็อคทั้งสองข้างชิดกัน

จะเป็นอย่างไรถ้าเรามีเพียง .float-child divs โดยไม่มีช่องว่างภายใน และพยายามเพิ่มช่องว่างโดยใส่ margin-right ค่าในบล็อคแรกแบบนี้?

HTML:

<div class="float-container">

  <div class="float-child green">
    Float Column 1
  </div>
  
  <div class="float-child blue">
    Float Column 2
  </div>
  
</div>

CSS:

.float-child.green {
    margin-right: 20px;
}

ในกรณีนี้ ทั้ง .float-child องค์ประกอบจะใช้พื้นที่ 50% ของความกว้างทั้งหมด แต่องค์ประกอบสีเขียวตัวแรกจะมีระยะขอบ 20px ด้วย

ซึ่งหมายความว่าทั้งสองบล็อกจะใช้ความกว้าง 50% + 20px + 50% จะมีความกว้างมากกว่า 100% 20px ซึ่งหมายความว่าไม่มีที่ว่างเพียงพอสำหรับทั้งคู่ที่จะอยู่เคียงข้างกัน

จากนั้นบล็อกสีน้ำเงินอันที่สองจะห่อไปที่แถวถัดไปใต้บล็อกแรก และลอยไปทางซ้ายที่นั่น:

คุณสามารถลองปรับแต่งความกว้างเพื่อให้เป็น 48% หรือตัวเลขอื่นที่น้อยกว่า 50% เพื่อให้พอดีกับพวกเขา แต่มันจะไม่แน่ชัด

นั่นเป็นเหตุผลที่ฉันชอบห่อบล็อกในชุด div ด้านนอกที่ความกว้าง 50% โดยมีช่องว่างภายในเพื่อเพิ่มช่องว่างระหว่าง div

ทุกวันนี้ มันง่ายกว่าที่จะใช้วิธีการอื่นที่ใหม่กว่าใน CSS เพื่อวาง div เคียงข้างกัน แทนที่จะใช้ float

มาดูหนึ่งในวิธีเหล่านี้กัน:วิธีเฟล็กซ์บ็อกซ์!

วิธี Flexbox

ด้วย flexbox เราสามารถใช้วิธีที่ง่ายกว่าในการจัดองค์ประกอบ div ทั้งสองของเรา

HTML:

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS:

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

ด้วย flexbox เราได้ตั้งค่า display: flex บนพาเรนต์ .flex-container องค์ประกอบ. สิ่งนี้จะเปิด flexbox

จากนั้นในแต่ละ .flex-child เรากำลังตั้งค่า flex: 1 . ตัวเลขนี้เหมือนกับอัตราส่วนเปรียบเทียบความกว้างของเด็กแต่ละคนในองค์ประกอบ parent flex

เนื่องจากเหมือนกัน พื้นที่ว่างจึงถูกแบ่งเท่าๆ กัน และเนื่องจากเรามีองค์ประกอบย่อยสององค์ประกอบ แต่ละองค์ประกอบจึงใช้พื้นที่ 50%

โค้ดผลลัพธ์จะมีลักษณะดังนี้:

เพิ่มช่องว่างระหว่าง div โดยใช้ระยะขอบ และยังคงพอดี!

สังเกตว่าเราได้เพิ่มพื้นที่โดยเพิ่ม margin-right: 20px เป็นเพียง .flex-child . ตัวแรก องค์ประกอบ. อย่างไรก็ตาม flexbox นั้นฉลาดพอที่จะพิจารณา 20px พิเศษนั้นเมื่อแบ่งความกว้างที่เหลือออก

ซึ่งหมายความว่าคุณสามารถเพิ่มช่องว่างด้วยระยะขอบโดยไม่ต้องคำนวณพิกเซลที่แน่นอน Flexbox จะพอดีกับเนื้อหาของคุณ!

นี่เป็นเหตุผลสำคัญข้อหนึ่งที่ฉันชอบ flexbox

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

ในกรณีของเรา หากเราต้องการซ้อนสอง div ไว้ใต้อีกอันสำหรับมือถือ เราจะต้องนำ margin-right ออก คุณสมบัติสำหรับความกว้างมือถือ

หรือคุณสามารถเพิ่มองค์ประกอบภายนอกเพิ่มเติมพร้อมช่องว่างภายในสำหรับ .flex-child . แต่ละรายการ คล้ายกับที่เราทำกับวิธี float

มันไม่ได้ใช้งานง่าย 100% แต่ก็ยังใช้งานได้ หากคุณต้องการสร้างเลย์เอาต์ที่ตอบสนองที่ซับซ้อนมากขึ้นด้วย flexbox คุณจะต้องคำนึงถึงสิ่งนี้

มาดูวิธีการใหม่ล่าสุดที่คุณสามารถใช้เพื่อวาง div แบบเคียงข้างกัน:ตาราง CSS

วิธีการกริด CSS

และนี่คือวิธีที่คุณสามารถวาง div ทั้งสองแบบเคียงข้างกัน โดยใช้ตาราง CSS:

HTML:

<div class="grid-container">

    <div class="grid-child purple">
        Grid Column 1
    </div>

    <div class="grid-child green">
        Grid Column 2
    </div>
  
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

และนี่คือลักษณะของโค้ด:

การเปลี่ยนแปลงครั้งใหญ่อย่างหนึ่งของกริดคือคุณต้องกำหนดว่าเทมเพลตกริดจะหน้าตาเป็นอย่างไรก่อน หมายถึงจำนวนคอลัมน์และ/หรือแถวที่คุณต้องการในเลย์เอาต์ของคุณ

ในกรณีของเรา เราต้องการสองคอลัมน์ที่มีความกว้างเท่ากัน ดังนั้นในพาเรนต์ .grid-container องค์ประกอบ เราเปิดกริดด้วย display: grid . จากนั้นเราเพิ่มจำนวนคอลัมน์ที่เราต้องการในเลย์เอาต์ด้วย grid-template-columns ทรัพย์สิน

เราต้องการสองคอลัมน์ที่มีความกว้างเท่ากัน ดังนั้นเราจึงตั้งค่าเป็น 1fr 1fr . สิ่งนี้บอกให้เบราว์เซอร์สร้างเค้าโครงสองคอลัมน์ และแต่ละคอลัมน์ใช้ 1fr (fr =หน่วยเศษส่วน) ของช่องว่าง

หน่วย fr เป็นอัตราส่วนของแต่ละคอลัมน์ต่อคอลัมน์อื่น คล้ายกับ flex: 1 กฎที่เราใช้ในวิธีเฟล็กซ์บ็อกซ์ ตั้งค่าคอลัมน์เป็น 1fr 1fr หมายความว่าแต่ละคอลัมน์จะใช้พื้นที่เท่ากัน

การเพิ่มช่องว่างระหว่างรายการกริดด้วยคุณสมบัติ grid-gap>

ข้อดีอย่างหนึ่งของการใช้กริด CSS คือคุณไม่จำเป็นต้องใช้ช่องว่างภายในหรือระยะขอบเพื่อเพิ่มช่องว่างระหว่างรายการกริด

คุณสามารถใช้ grid-gap (หรือ gap ในเบราว์เซอร์ที่ใหม่กว่า) เพื่อเพิ่มพื้นที่ในเทมเพลตกริดของคุณโดยอัตโนมัติ

เราได้ตั้งค่า grid-gap ถึง 20px ดังนั้นเบราว์เซอร์จะรู้ว่าต้องเพิ่มพื้นที่ว่างระหว่างรายการทั้งหมด 20px ไม่ว่าจะเป็นแบบเคียงข้างกันหรือวางซ้อนกัน

และคุณอาจสังเกตเห็นว่าคุณสมบัติ CSS ทั้งหมดสำหรับกริดถูกตั้งค่าไว้ที่ .grid-container พาเรนต์ องค์ประกอบ. เราไม่จำเป็นต้องเขียน CSS ใดๆ ให้กับลูก .grid-child องค์ประกอบ!