数据结构
网络
关系数据库管理系统 (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 次浏览
