div并排布局详解

一、div并排布局

div并排布局是实现网页布局的基础，常见的有两个div并排左右显示、div并排显示、div并排放置、div并排居中等方式。

二、两个div并排左右显示

实现两个div左右显示主要有以下两种方式：

1. 使用float属性

<style>
    .left-div{
         width: 50%;
         float: left;
    }
    .right-div{
         width: 50%;
         float: right;
    }
</style>

<div class="left-div">
    <p>左侧内容</p>
</div>

<div class="right-div">
    <p>右侧内容</p>
</div>

通过设置两个div的宽度为50%，并使用float属性使其左右分别浮动，实现两个div并排左右显示。

2. 使用display属性

<style>
    .container{
        display: flex;
    }
    .left-div{
        width: 50%;
    }
    .right-div{
        width: 50%;
    }
</style>

<div class="container">
    <div class="left-div">
        <p>左侧内容</p>
    </div>

    <div class="right-div">
        <p>右侧内容</p>
    </div>
</div>

通过设置容器的display属性为flex，并将两个div的宽度都设置为50%，实现两个div并排左右显示。

三、div并排显示

实现div并排显示，主要是通过将div的display属性设置为inline-block实现。

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

<div class="left-div">
    <p>左侧内容</p>
</div>

<div class="right-div">
    <p>右侧内容</p>
</div>

通过将两个div的display属性都设置为inline-block，实现div并排显示。

四、div并排放置

实现div并排放置，主要是通过设置div的position属性、left、top属性的值实现。

<style>
    .left-div{
        position: absolute;
        top: 0;
        left: 0;
    }
    .right-div{
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="left-div">
    <p>左侧内容</p>
</div>

<div class="right-div">
    <p>右侧内容</p>
</div>

通过将左侧div的position属性设置为absolute，top、left属性的值设置为0，将右侧div的position属性设置为absolute，right、top属性的值设置为0，实现div并排放置。

五、div并排居中

实现div并排居中，主要是通过将两个div的宽度设置为固定值，并通过设置容器的text-align属性值为center实现。

<style>
    .container{
        text-align: center;
    }
    .left-div{
        display: inline-block;
        width: 200px;
    }
    .right-div{
        display: inline-block;
        width: 200px;
    }
</style>

<div class="container">
    <div class="left-div">
        <p>左侧内容</p>
    </div>

    <div class="right-div">
        <p>右侧内容</p>
    </div>
</div>

通过设置容器的text-align属性值为center，设置两个div的宽度为固定值，实现div并排居中，并且两个div中的内容在居中状态下也会居中显示。

六、div怎么并排

实现div并排，我们可以使用float属性、display属性、position属性等方法，具体实现方法因需求而异。

七、div并排没有float

float属性会使元素脱离文档流并浮动在周围的元素周围，使用过多可能出现元素重叠、不符预期的排列等问题。如果要实现div并排布局，可以使用display属性（如：flexbox、inline-block）或position属性（如：absolute、relative）等实现方法。

八、并排两个div

实现两个div并排，可以使用float属性、display属性等方法。其中，float属性常用于实现左右两个元素并排，而display属性常用于实现单行多元素并排。

九、并排div的宽度自适应js

实现并排div的宽度自适应，可以使用JavaScript动态计算宽度，使它们分别占据容器的一半宽度。

<style>
    .left-div, .right-div{
        display: inline-block; /*必须使用inline-block*/
    }
</style>

<div id="container">
    <div class="left-div">
        <p>左侧内容</p>
    </div>

    <div class="right-div">
        <p>右侧内容</p>
    </div>
</div>

<script>
    var container = document.getElementById("container"); //获取容器
    var leftDiv = document.getElementsByClassName("left-div")[0]; //获取左侧div
    var rightDiv = document.getElementsByClassName("right-div")[0]; //获取右侧div

    //计算每个div的宽度
    var width = container.offsetWidth / 2;

    //设置每个div的宽度
    leftDiv.style.width = width + "px";
    rightDiv.style.width = width + "px";
</script>

通过使用JS获取容器，计算容器宽度，再将宽度赋值给每个div实现，并排div的宽度自适应。

十、小结

div并排布局是实现网页布局的基础，通过使用float属性、display属性、position属性等多种方法，可以实现各种不同的div并排布局。在实际开发中，应根据具体需求合理选择实现方式。