在自适應布局之table實作一文中，我們初步了解了如何用Table實作自适應寬度的分欄布局。 但由于Table的死闆布局限制和一些性能原因，我們通常不會采用基于Table的自适應布局。本文便來介紹一種常用的基于div浮動的分欄布局。 先看效果：
HTML架構
相比于Table布局，基于CSS的布局HTML代碼會更加簡潔：
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
首先通過
doctype
指令讓浏覽器以HTML5标準來解析該檔案，然後在
<body>
中添加一個容器，他有左右兩個子容器構成。 語義上很直覺吧！
CSS
基于div浮動的分欄布局的思路是：設定其中一個子容器的
float
讓它脫離文檔流，然後另一個正常放置。為了讓後一個子容器内可以正常解析父容器寬度，通常會設定後一個容器的左外邊距。
.left{
float: left;
width: ;
background-color: lightyellow;
}
.right{
margin-left: ;
background-color: lightblue;
}
為了讓頁面更加清晰，再來一點輔助樣式：
.container{
margin: ;
border: solid grey;
}
.left, .right{
height: ;
}
至此我們已經完成了基于div浮動的分欄布局。
溢出與滾動
用CSS建立任何容器時，都會面臨着容器溢出的問題：如果它的内容太長或者太高容器應當作何反應？上述的分欄布局也存在這樣的問題。
比起table布局，浮動布局中容器溢出的問題更加嚴重。有着非常嚴(si)格(ban)的布局行為，它不允許兩個<table>
遮擋、重合、或者任何形式的互相影響（對目前<td>
的作用除外）。<tr>
為了讓這個問題凸顯出來，我們寫這樣一些HTML代碼：
<body>
<div class="container">
<div class="left">
<p>class aptent <br/>taciti<br/> sociosqu <br/>ad<br/> litora <br/>torquent<br/> per <br/>conubia<br/> nostra<br/>,<br/> per<br/> inceptos <br/>taciti<br/> sociosqu<br/> himenaeos<br/>. suspendisse<br/> potenti<br/>. quisque<br/> augue metus<br/>, hendrerit<br/> sit amet<br/>, commodo<br/> vel,<br/> scelerisque ut<br/>, ante<br/>. praesent<br/> euismod euismod<br/> risus.<br/> mauris ut<br/> metus sit<br/> amet mi<br/> cursus commodo<br/>. morbi<br/></p>
</div>
<div class="right">
Vestibulumsuscipitenimacnulla.Prointincidunt.Proinsagittis.Curabiturauctormetusnonmauris.Nunccondimentumnislnonaugue.Donecleourna,dignissimvitae,porttitorut,iaculissitamet,sem.
</div>
</div>
</body>
然後頁面就變成這樣了：
左側欄發生了垂直方向的高度溢出，而右側欄發生了水準方向的行溢出。HTML的流式布局行為與排版軟體及其相似，對于行溢出的情況應當設定斷字屬性； 對于高度溢出則應當設定一個滾動條。
.left{
overflow-y: auto;
}
.right{
word-break: break-word;
}
現在頁面正常了！
版權聲明本文由Harttle創作，轉載需署名作者且注明文章出處
<!DOCTYPE html>
<html>
<head>
<style>
.left{
float: left;
width: 200px;
background-color: lightyellow;
overflow-y: auto;
}
.right{
margin-left: 200px;
background-color: lightblue;
word-break: break-word;
}
.container{
margin: 10px;
border: 1px solid grey;
}
.left, .right{
height: 300px;
}
.clsTeenyWeeny { zoom: 0.10 }
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>class aptent <br/>taciti<br/> sociosqu <br/>ad<br/> litora <br/>torquent<br/> per <br/>conubia<br/> nostra<br/>,<br/> per<br/> inceptos <br/>taciti<br/> sociosqu<br/> himenaeos<br/>. suspendisse<br/> potenti<br/>. quisque<br/> augue metus<br/>, hendrerit<br/> sit amet<br/>, commodo<br/> vel,<br/> scelerisque ut<br/>, ante<br/>. praesent<br/> euismod euismod<br/> risus.<br/> mauris ut<br/> metus sit<br/> amet mi<br/> cursus commodo<br/>. morbi<br/></p>
</div>
<div class="right">
Vestibulumsuscipitenimacnulla.Prointincidunt.Proinsagittis.Curabiturauctormetusnonmauris.Nunccondimentumnislnonaugue.Donecleourna,dignissimvitae,porttitorut,iaculissitamet,sem.
</div>
</div>
<P οnmοuseοver="this.style.zoom='200%'" οnmοuseοut="this.style.zoom='normal'">
</body>
</html>
https://www.tianmaying.com/tutorial/css-line-wrap