css三个div在一行

CSS技术使得网页设计者能够以各种方式排列HTML元素。其中之一是将三个div元素放在同一行上，从而实现更加清晰的布局。实现这个目标的最简单的方法是使用display:inline-block属性。

div {
  display:inline-block;
} 

上面的代码将覆盖默认块布局并使div元素变成行内元素。接下来，您可以选择设置每个元素的宽度和内边距，以便它们在同一行上。下面的代码展示了如何设置三个div的宽度相等，全部居中在页面上。

div {
  width: 33.33%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
} 

注意，这里的box-sizing属性设置为border-box，这意味着元素的内边距和边框将包含在指定的宽度中。这个属性可以确保元素符合所需的宽度，而不会影响其他元素的大小。

最后，您可以将所有的div元素包装在单个容器中，从而使页面上的其他元素受到的影响更小。例如，您可以使用以下HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div> 

您的CSS样式将针对.container和.box类，例如：

.container {
  text-align: center;
}

.box {
  display: inline-block;
  width: 33.33%;
  padding: 20px;
  box-sizing: border-box;
} 

当这个CSS样式应用到HTML标记时，三个元素将在同一行上显示，而它们的父元素.container将居中。