HTML DIV 水平布局

介绍

在HTML中， div 元素可以作为容器来包裹其他HTML元素。使用CSS的 display 属性，我们可以实现不同的布局，其中包括水平布局。

水平布局

水平居中

要让一个 div 元素水平居中，可以使用以下CSS样式：

div {
  margin: 0 auto;
  width: fit-content;
}

其中， margin: 0 auto 让 div 元素左右外边距自动调整，从而实现水平居中，而 width: fit-content 则让 div 元素的宽度自适应内容。

左右分布

要让两个 div 元素左右分别排布，可以使用以下CSS样式：

.container {
  display: flex;
  justify-content: space-between;
}

其中， display: flex 让 .container 中的 div 元素以弹性盒模型排布，而 justify-content: space-between 则让两个 div 元素分别排布在最左边和最右边。

结语

以上是 HTML DIV 水平布局的简单介绍，通过合理运用CSS样式，可以实现更多灵活的水平布局效果。