526互联

设置左右布局在同一行

发布时间 2023-08-03 11:03:57作者: zhaogaojian

方式1

<style>
    .inline-div {
        display: inline-block;
    }
</style>

<div class="inline-div">内容1</div>
<div class="inline-div">内容2</div>

方式2

<style>
    .float-div {
        float: left; /* 或 float: right; */
        margin-right: 10px; /* 可选：为了在两个div之间添加一些间距 */
    }
</style>

<div class="float-div">内容1</div>
<div class="float-div">内容2</div>
<div style="clear: both;"></div> <!-- 清除浮动，确保不影响后续元素布局 -->

方式3

<style>
    .flex-container {
        display: flex; /* 将容器设置为弹性容器 */
    }

    .flex-item {
        flex: 1; /* 设置弹性项目的比例，使它们平均分配可用空间 */
        margin: 10px; /* 可选：添加一些间距 */
    }
</style>

<div class="flex-container">
    <div class="flex-item">内容1</div>
    <div class="flex-item">内容2</div>
</div>