เค้าโครง CSS - ตัวอย่างลอย

สารบัญ

    แสดงสารบัญ

หน้านี้ประกอบด้วยตัวอย่างโฟลตทั่วไป

ตารางกล่อง/กล่องความกว้างเท่ากัน

Box 1

Box 2


Box 1

Box 2

Box 3

ด้วยคุณสมบัติ float ทำให้ง่ายต่อการลอยกล่องเนื้อหาเคียงข้างกัน:

ตัวอย่าง

 * {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* three 
  boxes (use 25% for four, and 50% for two, etc) */
  padding: 
  50px; /* if you want space between the images */
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Some text inside the box.</p>
  </div>
</div>

<p><strong>Note:</strong> Here, we use the clearfix hack to take care of the layout flow. 
We also use the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>

การกำหนดขนาดกล่องคืออะไร

คุณสามารถสร้างกล่องลอยน้ำสามกล่องเคียงข้างกันได้อย่างง่ายดาย อย่างไรก็ตาม เมื่อคุณเพิ่มสิ่งที่ขยายความกว้างของแต่ละกล่อง (เช่น การเติมหรือเส้นขอบ) กล่องจะพัง คุณสมบัติ box-sizing ช่วยให้เราสามารถรวมช่องว่างภายในและเส้นขอบไว้ในความกว้าง (และความสูงรวมของกล่อง) ตรวจสอบให้แน่ใจว่าช่องว่างภายในอยู่ภายในกล่องและ ไม่แตก

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติการกำหนดขนาดกล่องได้ในบทการกำหนดขนาดกล่อง CSS ของเรา

รูปภาพเคียงข้างกัน

Italy
Forest
Mountains

ตารางของกล่องยังสามารถใช้เพื่อแสดงรูปภาพแบบเคียงข้างกัน:

ตัวอย่าง

 .img-container {
  float: left;
  width: 33.33%; /* three 
  containers (use 25% for four, and 50% for two, etc) */
  padding: 
  5px; /* if you want space between the images */
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>Float images side by side:</p>

<div class="clearfix">
  <div class="img-container">
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<p>Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>

กล่องความสูงเท่ากัน

ในตัวอย่างก่อนหน้านี้ คุณได้เรียนรู้วิธีลอยกล่องเคียงข้างกันโดยมีความกว้างเท่ากัน อย่างไรก็ตาม การสร้างกล่องลอยที่มีความสูงเท่ากันไม่ใช่เรื่องง่าย การแก้ไขอย่างรวดเร็ว แต่ต้องกำหนดความสูงคงที่ดังตัวอย่างด้านล่าง

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

ตัวอย่าง

 .box {
  height: 500px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
  height: 300px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Equal Height Boxes</h2>
<p>Floating boxes with equal heights:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <h2>Box 1</h2>
  <p>Some content, some content, some content</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <h2>Box 2</h2>
  <p>Some content, some content, some content</p>
  <p>Some content, some content, some content</p>
  <p>Some content, some content, some content</p>
  </div>
</div>

<p>This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.</p>
<p>Go back to the tutorial and find another solution, if this is not what you want.</p>

</body>
</html>

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

ตัวอย่าง

การใช้ Flexbox เพื่อสร้างกล่องที่ยืดหยุ่น:

Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.
Box 2 - My height will follow Box 1.

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.</div>
  <div class="box">Box 2 - My height will follow Box 1.</div>
</div>

<p>Try to resize the browser window to see the flexible layout.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

เคล็ดลับ: คุณสามารถอ่านเพิ่มเติมเกี่ยวกับโมดูลเค้าโครง Flexbox ได้ในบท CSS Flexbox ของเรา

เมนูนำทาง

คุณยังสามารถใช้ float กับรายการไฮเปอร์ลิงก์เพื่อสร้างเมนูแนวนอน:

ตัวอย่าง

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

ตัวอย่างเค้าโครงเว็บ

เป็นเรื่องปกติที่จะทำเค้าโครงเว็บทั้งหมดโดยใช้คุณสมบัติ float:

ตัวอย่าง

 .header, .footer {
  background-color: grey;
  color: white;
    padding: 15px;
}
.column {
  float: left;
  
  padding: 15px;
}
.clearfix::after {
  content: 
  "";
  clear: both;
  display: table;
  }
.menu {
  
  width: 25%;
}
.content {
  width: 75%;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
body {
  background-color: white;
}

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

ตัวอย่างเพิ่มเติม

ปล่อยให้รูปภาพลอยไปทางขวาในย่อหน้า เพิ่มเส้นขอบและระยะขอบให้กับรูปภาพ

รูปภาพที่มีเส้นขอบและระยะขอบที่ลอยไปทางขวาในย่อหน้า

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>

<h2>Let an image float to the right in a paragraph</h2>

<p>In the paragraph below, the image will float to the right. A dotted black border is added to the image. 
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>

<p><img src="w3css.gif" width="100" height="140">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

ให้รูปภาพพร้อมคำบรรยายลอยไปทางขวา

รูปภาพพร้อมคำบรรยายที่ลอยไปทางขวา

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: right;
  width: 120px;
  margin: 0 0 15px 20px;
  padding: 15px;
  border: 1px solid black;
  text-align: center;
}
</style>
</head>
<body>

<h2>Let an image with a caption float to the right</h2>

<p>In the paragraph below, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption.</p>

<div>
<img src="w3css.gif" width="100" height="140"><br>CSS is fun!
</div>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

ปล่อยให้อักษรตัวแรกของย่อหน้าลอยไปทางซ้ายและจัดรูปแบบตัวอักษร

ให้อักษรตัวแรกของย่อหน้าลอยไปทางซ้าย

<!DOCTYPE html>
<html>
<head>
<style>
span {
  float: left;
  width: 0.7em;
  font-size: 400%;
  font-family: algerian, courier;
  line-height: 80%;
}
</style>
</head>
<body>

<h2>Style the first letter of a paragraph and let it float left</h2>

<p>
<span>H</span>ere, the first letter of this text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian".
</p>

</body>
</html>

ใช้ float เพื่อสร้างโฮมเพจที่มีแถบนำทาง ส่วนหัว ส่วนท้าย เนื้อหาด้านซ้าย และเนื้อหาหลัก

การสร้างเว็บไซต์ด้วย float

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 15px;
}

.footer {
  background-color: #444;
  color: white;
  padding: 15px;
}

.topmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #777;
}

.topmenu li {
  float: left;
}

.topmenu li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.topmenu li a:hover {
  background-color: #222;
}

.topmenu li a.active {
  color: white;
  background-color: #4CAF50;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.sidemenu {
  width: 25%;
}

.content {
  width: 75%;
}

.sidemenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidemenu li a {
  margin-bottom: 4px;
  display: block;
  padding: 8px;
  background-color: #eee;
  text-decoration: none;
  color: #666;
}

.sidemenu li a:hover {
  background-color: #555;
  color: white;
}

.sidemenu li a.active {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

คุณสมบัติ CSS Float ทั้งหมด

box-sizing

กำหนดวิธีคำนวณความกว้างและความสูงขององค์ประกอบ โดยควรมีช่องว่างภายในและเส้นขอบหรือไม่

clear

ระบุสิ่งที่ควรเกิดขึ้นกับองค์ประกอบที่อยู่ถัดจากองค์ประกอบลอยตัว องค์ประกอบ

float

ระบุว่าองค์ประกอบควรลอยไปทางซ้าย ขวา หรือไม่อยู่ที่ ทั้งหมด

overflow

ระบุสิ่งที่จะเกิดขึ้นหากเนื้อหาล้นกล่องขององค์ประกอบ

overflow-x

ระบุสิ่งที่ต้องทำกับขอบซ้าย/ขวาของเนื้อหา หากล้นพื้นที่เนื้อหาขององค์ประกอบ

overflow-y

ระบุสิ่งที่ต้องทำกับขอบด้านบน/ล่างของเนื้อหา หากล้นพื้นที่เนื้อหาขององค์ประกอบ