แบบแผนเลย์เอาต์สองคอลัมน์ของเว็บไซต์ใน CSS

มาสร้างเลย์เอาต์สองคอลัมน์รูปแบบต่อไปนี้กัน:

เริ่มต้นด้วยการสร้างโครงสร้างหลักของหน้า:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="content">
      content
    </div>
    <div id="sidebar">
      sidebar
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

ตอนนี้ตั้งสไตล์ให้กับ wrapper โดยจัดให้อยู่กึ่งกลางหน้าจอ:

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

ต่อไปมากำหนดสไตล์ให้กับ header และ footer:

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

อย่างที่คุณเห็น เราได้กำหนดความสูงให้กับ header และ footer เราทำอย่างนี้เพราะในแบบแผนของเราพวกเขาไม่มีเนื้อหา หากมีเนื้อหาอยู่ ไม่ควรกำหนดความสูงให้กับบล็อก - มันจะถูกกำหนดขึ้นโดยเนื้อหาของพวกเขา

ยังไงก็ตาม โปรดทราบว่าเราไม่ได้กำหนดความกว้างให้กับพวกเขา สาเหตุคือ header และ footer เป็นองค์ประกอบระดับบล็อก และความกว้างของพวกเขาจะเท่ากับความกว้างของ wrapper โดยอัตโนมัติ

ตอนนี้มากำหนด padding ให้กับพวกเขา เพื่อให้ข้อความไม่ติดขอบ:

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

อย่างไรก็ตาม การมี padding จะส่งผลเสียต่อขนาดของบล็อก - พวกเขาจะกลายเป็นใหญ่กว่าที่ระบุไว้ มาปรับพฤติกรรมของบล็อกทั้งหมด เพื่อให้ padding และเส้นขอบไม่ทำให้บล็อกของเราขยายออก:

css* {
  box-sizing: border-box;
}

ตอนนี้เราต้องวางเนื้อหาและแถบด้านข้างไว้ในแถวเดียวกัน ทำได้โดยใช้ flex:

css#container {
  display: flex;
}

มากำหนดความกว้างให้กับเนื้อหาและแถบด้านข้าง ในขณะที่ผลรวมความกว้างของพวกเขาควรเท่ากับความกว้างของ wrapper:

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

สมมติว่าเราต้องการสร้างระยะห่างระหว่างแถบด้านข้างและเนื้อหา ในกรณีนี้จำเป็นต้องกำหนด margin ให้กับแถบด้านข้าง ในขณะเดียวกันเราจะต้องหักความกว้างสำหรับ margin นี้จากบางคน มาหักจากเนื้อหา โดยลดความกว้างของมันลง:

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

ตอนนี้มาเพิ่มความสูง เนื่องจากองค์ประกอบของเราไม่มีเนื้อหา เพียงเพิ่มความสูงให้กับองค์ประกอบเดียวก็พอ เพราะองค์ประกอบ flex ที่สองจะปรับตามความสูง (ทำไม?) มากำหนดความสูงให้กับเนื้อหา:

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

มาเพิ่มสไตล์ที่เหลือให้กับเนื้อหาและแถบด้านข้าง:

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

ทั้งหมดนี้ เลย์เอาต์ของเราพร้อมแล้ว มาชมรวบรวมโค้ดทั้งหมดเข้าด้วยกัน:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="sidebar">
      sidebar
    </div>
    <div id="content">
      content
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

css* {
  box-sizing: border-box;
}

#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}
#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#container {
  display: flex;
}
#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}