htmldiv上左右布局

HTML `<div>` 元素本身并没有内置的左右布局功能，但它可以结合CSS样式来实现这个效果。常见的做法是使用CSS的浮动（float）属性或者Flexbox、Grid等现代布局技术。以下是几种常见的实现左右布局的方式：

1. **浮动布局** (旧版方法)：
- 将两个`<div>`元素分别设置为`float:left`和`float:right`，并确保父容器有足够的宽度来容纳它们，避免内容挤在一起。

<div class="container">
    <div style="float: left;">左侧内容</div>
    <div style="float: right;">右侧内容</div>
</div>

2. **Flexbox布局**:
- 使用`display: flex` 和 `flex-direction: row` 在父容器中创建弹性布局。

<div class="container" style="display: flex; flex-direction: row;">
    <div>左侧内容</div>
    <div>右侧内容</div>
</div>

3. **Grid布局** (适用于更复杂的布局):
- 设置父容器为网格容器，然后定义列数和每个单元格的内容。

<div class="container" style="display: grid; grid-template-columns: auto auto;">
    <div>左侧内容</div>
    <div>右侧内容</div>
</div>

无论哪种方法，记得给父容器添加一些清除浮动的技巧（如`:after`伪元素加上`clear:both`)，以防其他元素受其影响。