CSS 2 divs nebeneinander - CSS

简介

本文将介绍如何使用CSS来将两个div元素水平排列在一行中。

CSS布局方式

在网页开发中，有多种方法可以实现将多个元素水平排列在一行中。以下是几种常见的布局方式：

1. 使用float属性
2. 使用flexbox布局
3. 使用grid布局

本文将重点介绍使用flexbox布局的方法。

使用Flexbox布局

Flexbox是一种灵活的布局方式，可以轻松地对元素进行水平和垂直方向上的排列。下面是使用Flexbox布局来将两个div元素水平排列在一行中的步骤：

1. 创建HTML结构

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

2. 添加CSS样式

.container {
  display: flex;
}

.box {
  flex: 1;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 10px;
  text-align: center;
}

在上面的代码中，我们给包含这两个div元素的容器添加了display: flex;样式，这样容器中的子元素就会自动水平排列在一行中。

同时，我们给每个子元素（即两个box类）添加了一些样式，如背景色、内边距和边距等。

3. 运行效果

以上就是使用Flexbox布局实现将两个div元素水平排列在一行中的方法。

总结

本文介绍了使用CSS的Flexbox布局来实现将两个div元素水平排列在一行中的方法。通过添加display: flex;样式给容器元素，以及一些简单的样式设置，就能轻松地实现这一效果。

希望本文对您有所帮助，谢谢阅读！

参考资料：

• CSS Flexbox