text.html

<h1 id="nav_point_315">第20章　多列布局</h1> 
<p class="zw">网页是一种特殊的媒介，与印刷品有着很大的不同，但是，比如杂志或报纸等印刷媒介上的设计思路，可以给Web设计带来启发。版式设计师在杂志上使用的多栏布局让我大开眼界。这就是为什么我常常觉得大多数网站布局的缺乏想象力，尤其是在响应式设计时代。这种状态急需改变，而CSS多列布局正是其中一种方法。</p> 
<p class="zw">不借助表现型标记，直接通过CSS多列布局创建多列文本，这种做法已经有十年了。我在《超越CSS》这本书中曾经写过，五年前在本书第一版中又写过一次。我在我参与的所有研讨会上都会教授CSS多列布局。但很遗憾的是，每当我问有多少人用过它时，只有很少的人会举手示意。我希望本书可以激发你使用CSS多列布局。</p> 
<p class="zw">正如其名，CSS多列布局提供了一种仅仅使用CSS来创建多列布局的方法，而不借助额外的标记、浮动或其他的布局方式。</p> 
<p class="zw">在“Get Hardboiled”的入口页面，我们就可以看到一个多列布局的例子。对于这个设计，我们将使用列来让内容具有更好可读性。为了实现这个目标，我们一般会增加很多区块来分割内容区，然后让它们通过浮动来创建列。</p> 
<pre class="代码无行号"><code><div class="col"> 
<p>Raymond Thornton Chandler was an American novelist and screenwriter. In 1932, at age forty-four, Chandler decided to become a detective fiction writer after losing his job as an oil company executive during the Great Depression.</p> 
</div> 
<div class="col"> 
<p>Chandler published seven novels during his lifetime (an eighth in progress at his death was completed by Robert B. Parker). All but Playback have been made into motion pictures, some several times. In the year before he died, he was elected president of the Mystery Writers of America.</p> 
</div></code></pre> 
<p class="zw">这项常用的技术并没有什么本质上的错误，它很容易实现，更重要的是，这种方法很可靠。所以毫无疑问，我们可以看到很多的网站上都在使用这种方式。然而在如今这个响应式设计的时代，我们必须要考虑到很多不同的屏幕尺寸，因此这项技术的缺点远远超过了它的优点。</p> 
<blockquote class="提示 editing-block">