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並排布局。在實際開發中，應根據具體需求合理選擇實現方式。