如何并排对齐 Div-之路教程

←如何跨浏览器一致地对齐复选框及其标签

CSS如何将内联块元素与容器顶部对齐→

如何并排对齐 Div

CSS 允许我们以多种方式并排对齐 <div> 元素。

我们将讨论一些广泛使用的方法。

<div> 标签用于定义页面或者文档的各个部分。

它将大部分 HTML 元素分组，然后使用 CSS 设置它们的样式。

三个或者更多不同的 <div> 元素可以使用 CSS 并排放置。
如果我们按照下面描述的步骤操作，这将非常容易。

让我们看一个例子，并尝试一起讨论代码的每个部分。

创建 HTML

在 <body> 部分创建一个 <main> 标签，id 为“boxes”，其中应包含我们的 <div> 元素。
创建 <div> 元素。对于我们的第一个 <div>，我们使用名称为“column1”的 id，第二个 id 为“column2”，第三个 id 为“column3”。
我们可以使用 <h2> 标签为 <div> 元素设置标题。

<body>
  <main id="boxes">
    <h2>onitroad</h2>
    <div id="column1">
      <h2>css教程</h2>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div id="column2">
      <h2>onitroad</h2>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div id="column3">
      <h2>时光如流水</h2>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
  </main>
</body>

添加 CSS

使用 float 属性定义元素应放置在容器的哪一侧。

float 属性具有三个值（none、left 和 right）。在我们的示例中，我们对 <div> 元素使用“left”值。

我们可以使用 background-color 属性为背景选择颜色。

我们使用十六进制值作为背景。

使用 width 和 height 属性设置 <div> 的大小。
使用 text-align 属性设置标题的位置。
使用与 float 属性直接相关的 clear 属性。

它定义一个元素是应该在浮动元素旁边，还是应该在它们下面（清除）。

使用内容属性。

content 属性与 ::before 和 ::after 伪元素一起使用以在元素内生成内容。

使用 display 属性，它使元素的行为类似于 HTML <table> 元素。

#boxes {
  content: "";
  display: table;
  clear: both;
}
div {
  float: left;
  height: 470px;
  width: 23%;
  padding: 0 10px;
}
#column1 {
  background-color: #a1edcc;
}
#column2 {
  background-color: #a0e9ed;
  width: 43%;
}
#column3 {
  background-color: #f497f1;
}
h2 {
  color: #000000;
  text-align: center;
}

如果元素绝对定位（位置：绝对），则忽略 float 属性。

让我们把代码部分放在一起看看结果！

并排对齐 div 的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #boxes {
        content: "";
        display: table;
        clear: both;
      }
      div {
        float: left;
        height: 470px;
        width: 23%;
        padding: 0 10px;
      }
      #column1 {
        background-color: #a1edcc;
      }
      #column2 {
        background-color: #a0e9ed;
        width: 43%;
      }
      #column3 {
        background-color: #f497f1;
      }
      h2 {
        color: #000000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main id="boxes">
      <h2>onitroad</h2>
      <div id="column1">
        <h2>风雨彩虹?</h2> 
        经历过风雨，才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      </div>
      <div id="column2">
        <h2>微笑生活?</h2> 
        生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。

      </div>
      <div id="column3">
        <h2>拼搏奋斗:</h2> 
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
      </div>
    </main>
  </body>
</html>

使用 CSS 边距和填充属性并排对齐 div 的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .container {
        width: 600px;
        height: 190px;
        background-color: #5cbbf2;
        padding: 35px 15px 5px;
      }
      .container:before,
      .container:after {
        content: "";
        display: table;
        clear: both;
      }
      .container div {
        float: left;
        width: 180px;
        height: 160px;
      }
      #box2 {
        background-color: #000000;
        margin-left: 30px;
        margin-right: 30px;
      }
      p {
        color: white;
        padding: 5px 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>onitroad</h2>
    <div class="container">
      <div id="box1">
        <img src="bg.jpg?ava=1" style="width:180px; height:160px;">
      </div>
      <div id="box2">
        <p> 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</p>
      </div>
      <div id="box3">
        <img src="car.jpg?ava=1" style="width:180px; height:160px;">
      </div>
    </div>
</html>

在这个例子中，我们使用了 CSS padding、margin 属性。

padding 属性在元素内容的所有边创建填充空间。
CSS 中的 margin 属性在元素周围创建一个空间。
此外，我们可以从文本的颜色选择器中选择我们想要的任何颜色。

使用 CSS display 属性的“flex”值并排对齐 div 的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .box {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 310px;
        height: 310px;
        border: 2px solid green;
      }
      .box div {
        width: 100px;
        padding: 15px;
        text-align: center;
        color: #000000;
        font-family: arial, sans-serif;
      }
      .green {
        background-color: green;
      }
      .blue {
        background-color: blue;
      }
      .gray {
        background-color: gray;
      }
      .pink {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex 属性示例</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
      <div class="pink">PINK</div>
    </div>
  </body>
</html>

其中我们使用了带有“flex”值的 display 属性。
display 属性定义用于 HTML 元素的框的类型。
“flex”值将元素显示为块级弹性容器。

将 div 与 CSS display 属性的“inline-block”值并排对齐的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .box div {
        width: 100px;
        display: inline-block;
        padding: 15px;
        text-align: center;
        color: #000000;
        font-family: arial, sans-serif;
      }
      .green {
        background-color: green;
      }
      .blue {
        background-color: blue;
      }
      .gray {
        background-color: gray;
      }
      .pink {
        background-color: pink;
      }
      .yellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Flex 属性示例</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
      <div class="pink">PINK</div>
      <div class="yellow">YELLOW</div>
    </div>
  </body>
</html>

在上面的示例中，我们使用了带有“inline-block”值的 display 属性，它将元素显示为行内级块容器。
此外，我们使用了 font-family 属性，它允许为所选元素创建字体系列名称和/或者通用系列名称的优先列表。

日期：2020-06-02 22:14:56 来源：oir作者：oir