html让div并列_代码示例

温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！

1、要将div并列，可以使用CSS中的浮动属性来实现。通过给需要并列的div添加float属性，可以使它们在同一行显示。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<style>
    .column {
        float: left;
        width: 50%;
        padding: 10px;
    }
</style>
</head>
<body>
<div class="bf33-48e8-b9ee-a160 column" style="background-color:#aaa;">
  <h2>Column 1</h2>
  <p>Some text..</p>
</div>
<div class="48e8-b9ee-a160-7b9a column" style="background-color:#bbb;">
  <h2>Column 2</h2>
  <p>Some text..</p>
</div>
</body>
</html>

在上面的示例代码中，通过给两个div添加class为"column"，并设置宽度为50%和浮动属性，实现了两个div的并列显示。其中，每个div内部的内容可以根据需要进行修改。

2、除了使用浮动属性，还可以使用CSS中的flexbox布局来实现div的并列显示。通过设置父元素的display属性为flex，可以使其子元素在同一行显示。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
    }
    .column {
        flex: 1;
        padding: 10px;
    }
</style>
</head>
<body>
<div class="a160-7b9a-5fa8-58f7 container">
  <div class="7b9a-5fa8-58f7-32d6 column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="5fa8-58f7-32d6-8dd3 column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>