自适应布局之div浮动实现

在自适应布局之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: 200px;
  background-color: lightyellow;
}
.right{
  margin-left: 200px;
  background-color: lightblue;
}

为了让页面更加清晰，再来一点辅助样式：

.container{
  margin: 10px;
  border: 1px solid grey;
}
.left, .right{
  height: 300px;
}

至此我们已经完成了基于div浮动的分栏布局。

溢出与滚动

用CSS创建任何容器时，都会面临着容器溢出的问题：如果它的内容太长或者太高容器应当作何反应？上述的分栏布局也存在这样的问题。

比起table布局，浮动布局中容器溢出的问题更加严重。<table>有着非常严(si)格(ban)的布局行为，它不允许两个<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;
}

现在页面正常了！

<!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>

<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>

Vestibulumsuscipitenimacnulla.Prointincidunt.Proinsagittis.Curabiturauctormetusnonmauris.Nunccondimentumnislnonaugue.Donecleourna,dignissimvitae,porttitorut,iaculissitamet,sem.

</div>

</body>

</html>

https://www.tianmaying.com/tutorial/css-line-wrap