使用CSS的双面页面布局

时间:2014-09-25 11:37:38

标签: html css xhtml

我想知道如何使用CSS在XHTML中设置报纸页面。

如何使用CSS以便将XHTML的内容分成两列,就像报纸布局一样?

2 个答案:

答案 0 :(得分:1)

你可以使用CSS Columns这样做。他们don't have great support in anything but the newest browsers,但您可以使用JS Polyfill旧浏览器。

CSS-Tricks.com有一个很棒的Guide to Responsive-Friendly CSS Columns,但这里是TL; DR版本作为概念证明:



article {
  -webkit-columns: 3 200px;
  -moz-columns: 3 200px;
  columns: 3 200px;
}
article p {
  margin-bottom:1.5em;
}

<article>
<p>Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis.</p>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.</p>  
</article>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用#col1 {float:left; }和#col2 {float:left;保证金左:25px的;也会给你这种效果,并且可以在IE9及更早版本中使用。