0

实现 css 列:仅使用包装 div 列内容:

http://jsfiddle.net/AmqD5/4/

这一切都适用于 webkit 和更旧的(之前的 firefox 22)版本。在 v22 中,内容的行为很奇怪(没有列,这取决于窗口大小)。

它是新版本的错误还是可能有一种解决方法(一些其他 css 规则)来使内容像 webkit 和旧版本一样工作?

HMTML:

<div class="wrap">
    <div class="columns">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

CSS:

.wrap {
    position: absolute;    
    left: 100px;
    outline: 1px dashed red;
    width: 300px;
    height: 407px;
}

.columns {
position: absolute; 
    left: 0px; 
    right: 0px; 
    -webkit-column-width: 276px; 
    -webkit-column-gap: 25px; 
    -webkit-column-rule: 0px none; 
    -moz-column-width: 276px; 
    -moz-column-gap: 25px; 
    -moz-column-rule: 0px none; 
    height: 407px; 
    font-size: 20px; text-align: left; 
    -moz-user-select: none; 
    cursor: default; 
    visibility: visible; 
    display: block;    
}
4

1 回答 1

0

试试 position: relative;。问题显然解决了

.columns {
   position: relative; 
   ...
}

在这里演示:http: //jsfiddle.net/p3VHh/

于 2013-07-26T16:00:52.193 回答