HTML div side by side|极客教程

HTML div side by side

在HTML中，div元素是一个非常常用的块级元素，可以用来创建不同的容器来组织和布局网页内容。在本文中，我们将学习如何使用HTML和CSS来实现将多个div元素横排显示在一行的效果，即side by side。

使用float属性实现横排

float属性可以让元素在水平方向上浮动，使得元素可以并排显示在同一行。以下是使用float属性来实现div元素横排显示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side by Side Divs</title>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        float: left;
        margin-right: 20px;
    }
</style>
</head>
<body>

<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>

</body>
</html>

Output:

HTML div side by side

在上面的示例中，我们创建了一个class为box的div元素，并设置了宽度、高度、背景颜色以及float:left属性。通过设置float属性为left，使得这三个div元素并排显示在同一行。margin-right属性用来设置div元素之间的间距。

使用display:inline-block实现横排

除了使用float属性，我们还可以使用display:inline-block来实现div元素横排显示的效果。以下是使用display:inline-block属性的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side by Side Divs</title>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        display: inline-block;
        margin-right: 20px;
    }
</style>
</head>
<body>

<div class="box">div1</div>
<div class="box">div2</div>
<div class="box">div3</div>

</body>
</html>

Output:

HTML div side by side

在上面的示例中，我们同样创建了一个class为box的div元素，并设置了宽度、高度、背景颜色以及display:inline-block属性。通过设置display:inline-block属性，这三个div元素也能够横排显示在同一行。

使用flexbox布局实现横排

flexbox是CSS3中的一种布局模式，可以方便地实现各种复杂的布局效果。以下是使用flexbox布局来实现div元素横排显示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side by Side Divs</title>
<style>
    .container {
        display: flex;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        margin-right: 20px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="box">div1</div>
    <div class="box">div2</div>
    <div class="box">div3</div>
</div>

</body>
</html>