html 基本布局介紹

1、div默認是縱向排列的，例子如下：

<div id="wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

2、如果要div橫向排列，用：float：left

#div1{
    float: left;
}
#div2 {
    float: right;
}
#div3 {
    float: right;
}

橫向排列了，但是順序錯位了。

div2 和 div3，可以通過將它們再用一個 div 包起來的方法解決。

3、inline-block 行塊標簽

#div1, #div2, #div3{
    display: inline-block;
}

元素間會有空白。這個空白其實是空白符，因為 inline-block 會使元素在行內排列，也就是跟文字在一起排列，而我們源代碼中 div 和 div 之間的空格、Tab、換行符在瀏覽器里會被合並成一個空白符，所以就會出現縫隙 --------------------- 本文來自 love--baby 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/hunhun1122/article/details/78591103?utm_source=copy

參考文章：https://blog.csdn.net/hunhun1122/article/details/78591103