資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用固定寬度右列建立雙列 Div 佈局？
<div> 元素是 HTML 中使用最廣泛的元素之一。“<div>” 指的是將頁面劃分為若干部分的容器。這些部分對於將元素組合在一起非常有用。<div> 元素本身並不具有視覺表示，但是當我們想要將自定義樣式應用於 HTML 元素時，它們非常有用。它們允許我們對元素進行分組，以便對內部所有元素應用相同的樣式。我們也可以設定整個 <div> 元素的樣式。使用 class 或 id 屬性進行樣式設定很簡單。
示例
這是一個簡單的示例，展示了 div 標籤的用途。
<html>
<head>
<style>
.div1{
background-color:lightblue;
width:300px;
height:75px;
margin-bottom:-16px;
}
.div2{
background-color:lightpink;
width:300px;
height:30px;
margin:0px;
}
</style>
</head>
<body>
<div class="div1">
<p>DIV 1</p>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</body>
</html>
我們也可以有兩個 div 元素彼此相鄰。這被稱為**雙列 div** 佈局。這可以使用 CSS **float** 屬性實現。
CSS float 屬性將元素定位在其容器的左側或右側，允許文字和內聯元素環繞它。元素從頁面的正常流程中移除，但它仍然保留在流程中。float 屬性指定為來自值的列表中的單個關鍵字，即 left、right、none、inline-start 和 inline-end。
示例
下面的示例顯示了使用 float 屬性建立雙列 div 佈局。
<html>
<head>
<style>
.div1{
background-color:lightblue;
width:300px;
height:75px;
margin-bottom:-16px;
float:left;
}
.div2{
background-color:lightpink;
width:100%;
height:75px;
margin:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<p>DIV 1</p>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</div>
</body>
</html>
div 元素的高度和寬度可以根據需要調整，也可以固定為某個尺寸。
在本教程中，我們將討論一種建立雙列 div 佈局的方法，其中右列具有固定寬度。
使用 CSS float 和 width 屬性
如前所述，float 屬性用於內容的定位和格式化。它可以用來將任何內聯元素環繞指定的 HTML 元素，例如列表、段落、div、span、表格、iframe 和塊引用。
width 屬性指定元素的寬度。預設情況下，它確定內容區域的寬度，但是如果 box-sizing 設定為 border-box，則它確定邊框區域的寬度。
我們可以透過設定右列的 float 和 width 屬性來建立雙列 div 佈局，同時確保左列沒有寬度和 float。
示例
在下面的示例中，我們將右列的 float 屬性設定為 right，以便它以預定義的固定寬度浮動到容器的右側。左列的寬度設定為 auto，允許瀏覽器計算寬度。
<!DOCTYPE html>
<html>
<head>
<title>
How to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
</title>
<style>
body{
margin:20px;
}
.container {
height: auto;
overflow: hidden;
}
.div2 {
width: 150px;
height:50px;
float: right;
background: darkcyan;
}
.div1 {
height:50px;
width: auto;
overflow: hidden;
background:turquoise;
}
p{
margin-top:15px;
margin-left:20px;
font-size:20px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="div2">
<p>DIV 2</p>
</div>
<div class="div1">
<p>DIV 1</p>
</div>
</div>
</body>
</html>
上面的示例需要將右列放在左列之前。但是，如果我們想遵循正確的**HTML 標記**，我們可以嘗試下面的示例。
示例
下面的示例幫助我們在不調整 HTML 標記的情況下建立雙列 div 佈局。
<html>
<head>
<title>How to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
</title>
<style>
body{
margin:30;
background:lightblue;
}
.container {
width: 100%;
background: lavender;
float: left;
margin-right: -200px;
}
.div1 {
background: lavenderblush;
margin-right: 155px;
border:3px solid purple;
}
.div2 {
width: 150px;
float: right;
border:3px solid purple
}
p{
margin-left:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<p>DIV 1</p>
</div>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</body>
</html>
602 次瀏覽
