极客笔记HTML 如何创建一个具有固定宽度右列的两栏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元素的高度和宽度，也可以固定到某个尺寸。
在本教程中，我们将讨论一种使用CSS浮动和宽度属性创建具有固定宽度的两列div布局的方法。
使用CSS浮动和宽度属性
如前所述，float属性用于定位和格式化内容。它可用于将任何内联元素围绕指定的HTML元素进行包装，例如列表、段落、div、span、表格、iframe和块引用。
width属性指定元素的宽度。默认情况下，它确定内容区域的宽度，但如果box-sizing设置为border-box，则确定边框区域的宽度。
我们可以通过设置右列的float和width属性来创建一个具有固定宽度的两列div布局，同时确保左列不具有宽度和浮动属性。
例子
在下面的例子中，我们将右列的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标记 ，我们可以尝试下面的示例。
示例
以下示例帮助我们创建一个两列的div布局，而无需调整HTML标记。
<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>