作為一名合格的前端程序員，各種布局方式是肯定要熟練的，可我就是這么一個不合格的前端，這里記錄一下左右布局的實現思路?

父元素容器設置固定高度，設置flex?，寬度可以設為100%或者具體像素，根據業務需求來定

父元素下有兩個子元素，分別為左右容器

左容器或右容器均可以設置固定寬度(如果僅是左右布局，可設置一個寬，另一方flex設為1)，高度為100%父級高度，縱向溢出自動

補充說明：當然了，你想自己自定義滾動條的樣式也是可以的

具體代碼如下：

<div class="layout"><aside class="aside"><p>1++</p><p>1++</p><p>1++</p><p>1++</p><p>1++</p><p>1++</p> <p>1++</p><p>1++</p><p>1++</p><p>1++</p><p>1++</p><p>1++</p></aside><article class="article"><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p><p>2++</p></article> </div> .layout{width: 100%;height: 100vh;display: flex; } .aside{width: 300px;height: 100%;overflow-y: auto;} .article{flex: 1;height: 100%;overflow-y: auto;background-color: #09f;}

總結

以上是生活随笔為你收集整理的HTML布局之左右布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。