css一排三个div

CSS一排三个div
在网页开发中，经常需要在同一行内显示多个元素。CSS提供了多种方法来实现。本篇文章将介绍一种简单的方法，使用CSS将三个div元素水平排列在同一行内。
首先，我们需要HTML代码来创建三个div元素。在body标签内添加以下代码：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div> 

上述代码创建了三个具有相同类名“box”的div元素，“Box 1”，“Box 2”和“Box 3”，分别是这些div的内容。
接下来，我们要使用CSS样式来实现这三个div元素的水平排列。在head标签中添加以下代码：

<style>
  .box {
    display: inline-block;
    width: 30%;
    height: 100px;
    background-color: #eee;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
  }
</style> 

上述CSS样式定义了.box类的样式，其中display：inline-block表示div元素将水平排列在同一行内，width:30％表示每个div元素的宽度为父元素（默认为body元素）宽度的30％，height:100px表示每个div元素的高度为100像素，background-color:#eee表示背景颜色为浅灰色，margin:10px表示左右边距为10像素，box-sizing:border-box表示内边距和边框不会增加元素的宽度，text-align:center表示文本内容居中，line-height:100px表示每个div元素的行高为100像素。
现在，我们已经成功地在同一行内显示了三个div元素。运行代码，我们可以看到“Box 1”，“Box 2”和“Box 3”三个div元素水平排列在同一行内。
总之，使用CSS样式将三个div元素水平排列在同一行内是一种简单而有效的方法。掌握这种方法可以使我们更加方便地构建网页布局。