CSS3列数属性

2011-11-13 39 views 0 likes

我下面的短CSS代码CSS3列数属性

div#mydiv{ 
    border-style: none; 
    margin-bottom: 1em; 
    background-color: #F6F6F6; 
    color: #000; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    text-align: justify; 
    column-width: 15em; 
    column-gap: 2em; 
    column-count:2; 
    -moz-column-width: 15em; 
    -moz-column-gap: 2em; 
    -moz-column-count:2; 
    -webkit-column-count:2; 
    -webkit-column-width: 15em; 
    -webkit-column-gap: 2em; 
    box-shadow: #ccc 0 0 15px; 
    }

现在，在Firefox这项工作极大，并显示文本的2列。在Opera上，它可以工作，但它超级怪异，而不是显示2列文本，它显示3列！

这样的Firefox：

BLA BLA
BLA BLA
BLA BLA
BLA BLA
BLA BLA

歌剧

唧唧歪歪
唧唧歪歪
BLA bla bla

浏览器

blablablablablablabla

我想知道什么是错的戏，如果有一种方法可以在列浏览器中显示的文本。

谢谢

来源

2011-11-13 NoobTom

回答

是否有任何理由css3？如果没有，你可以做到这一点简单地用如CSS：

#container { 
    width:800px; 
} 

#left { 
    float:left; 
    width:400px; 
} 
#right { 
    float:right; 
    width:400px; 
}

而且

HTML：

<div id="container"> 
<div id="left">..</div> 
<div id="right">..</div> 
</div>

代码可能不是exacly权，只是给你的例子。

来源

2011-11-13 23:05:58 Jarno

通过这样做，我必须在两个左右的div之间手动分割文本。列属性是时尚的，没有metter你写多少文本自动分割文本 – NoobTom

那么我们有一个理由，好一个:) ..cant帮助你更多，但css3仍然支持一些浏览器很差。你可能会发现这个网站有用来检查你的网页用不同的浏览器看起来如何：http://browsershots.org/ – Jarno

CSS3列数属性

回答

相关问题