HTML 如何创建一个具有固定宽度右列的两栏Div布局

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>

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程