HTML CSS如何逐个对齐两个div并动态更改宽度

HTML和CSS可以实现逐个对齐两个div并动态更改宽度的效果。下面是一个示例代码：

HTML代码：

<div class="container">
  <div class="left-div">Left Div</div>
  <div class="right-div">Right Div</div>
</div>

CSS代码：

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

.left-div, .right-div {
  width: 50%;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

解释：

• 首先，我们创建一个包含两个div的容器，使用class名为"container"。
• 然后，我们使用CSS的flex布局来实现对齐效果。通过设置"container"的display属性为"flex"，我们可以让其内部的元素水平排列。
• 接着，我们使用justify-content属性设置对齐方式为"space-between"，这样左右两个div会分别靠左和靠右对齐，并且它们之间的间距会自动平均分配。
• 最后，我们为左右两个div分别创建class名为"left-div"和"right-div"的样式。设置宽度为50%，边框为1px实线黑色，内边距为10px，盒模型为border-box，这样可以保证边框和内边距不会撑大元素的宽度。

这样，两个div就会逐个对齐，并且可以动态更改宽度。你可以根据实际需求调整容器和div的样式。