html – Css3：剪切父级和双列子级：混合平衡和非平衡列填充

概述在我的文档中有一个固定高度的父div和一个两列子div. <div id="parent"> <div id="child">Text</div></div> 使用CSS3,我试图让孩子的两列布局与父母的溢出剪辑一起工作,方法如下： >当孩子包含很少的文本时,它不应该平衡两列,即它应该像列填充：auto >如果第一列扩展到父级的底部,则子级的文本应该换行到第二列 >但是,当子文本的数量超 在我的文档中有一个固定高度的父div和一个两列子div.

<div ID="parent">    <div ID="child">Text</div></div>

使用CSS3,我试图让孩子的两列布局与父母的溢出剪辑一起工作,方法如下：

>当孩子包含很少的文本时,它不应该平衡两列,即它应该像列填充：auto

>如果第一列扩展到父级的底部,则子级的文本应该换行到第二列

>但是,当子文本的数量超过父框容量时,子项的列应该是平衡的,父项应该剪切子框,右侧是垂直滚动条.

解决方法 简而言之,在撰写本文时,你无法用纯CSS3做你想做的事.您需要的目标API是 CSS3 Multiple Columns.如果您查看规范中的示例,您将看到它不是使用在给定元素上同时混合平衡和非平衡(顺序)列填充的用例编写的.

编写规范是为了在不同时间实现这两种技术,从而与您的请求具有相似(但最终略有不同)的功能.但是,我们可以通过JavaScript的一些帮助实现您的目标功能！下面的说明和代码在Chrome 38和FF 33 IE 11上测试.

如果您想要了解某些知识,请查看mutationobserver,这可能会减轻您对评论的担忧(不知道开发人员即时更改内容).它允许我们跟踪dom变化并适当地设置类.我的第一次尝试工作,但不是跨浏览器,请参阅回滚之前的编辑修订.

我将把你的三个要求称为州.

概观

>状态1和状态2共享相同的CSS(column-fill：auto).
>状态3因为多列规范需要不同的CSS规则(column-fill：balance).
>状态3的规则仅在状态1和状态2不能包含所有文本(即溢出)时才需要所需的功能.
>在JavaScript的帮助下,当状态1和2出现溢出时,我们可以对状态3应用类更改.
>相反,如果删除了内容,则在更改时我们可以重新应用状态1和2的类
> CSS属性column-count是跨越给定父元素的列数.在你的情况下,我们想要2.

实现状态1和状态2

无论何时设置列元素的高度,当没有足够的空间时,浏览器将向外渲染更多列.列宽在目标跨度的宽度处.因此,设置高度是必要的,以便按顺序填充列(按照您的要求,“像column-fill：auto”).有关代码,请参阅下面的代码段,“origState”的CSS规则适用于状态1和2.

实现状态3

然而,这种状态给了我们一个问题.设置列高度时溢出会生成更多与原始列宽度相同的列.现在你希望它的行为像列填充：平衡无限高度,可滚动.当您想要使用顺序填充(即列填充：自动)时,在CSS3多列规范中无法实现这一点.但是,如果在列中没有设置高度并且在父级中设置了高度(使用正确的滚动CSS值),我们可以实现您想要的效果.有关代码,“overFlowState”的CSS规则适用于状态3通知高度已被删除.

完整解决方案

现在我们必须将两个目标功能请求结合在一起.您必须确定何时将第二个类应用于子容器,这可以通过检查状态1和2上的溢出来完成.一旦将元素添加到dom / domready,就可以执行此检查. (打算写自己,但借用了JavaScript函数来检查this post的溢出).请参阅JavaScript的代码段.

function isOverflowed(element){    return element.scrollHeight > element.clIEntHeight || element.scrollWIDth > element.clIEntWIDth;}var elements = document.getElementsByClassname("origState");for(var i = 0; i < elements.length; i++){    var element = elements[i];    if(isOverflowed(element)){       element.classname = "overFlowState";       i--;    }}

.parent{    overflow-x:hIDden;    overflow-y:auto;    wIDth:100%;    height:7em;}.origState{    -webkit-column-count:2;    -moz-column-count:2;    column-count:2;    -moz-column-fill:auto;    height:inherit;}.overFlowState{    -webkit-column-count:2;    -moz-column-count:2;    column-count:2;}

<div >    <div >Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincIDunt ut laoreet dolore magna aliquam erat volutpat.    </div></div><div >    <div >Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincIDunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestIE consequat,vel illum dolore eu feugiat         </div></div><div >    <div >Lorem ipsum dolor sit amet,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdIEt doming ID quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in IIS qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt SAEpius.    Lorem ipsum dolor sit amet,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdIEt doming ID quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in IIS qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt SAEpius.        </div></div>

结论

手头的问题是当有高度设置时,列内容的溢出应该生成更多列.我们可以通过删除CSS中的列高来获得具有父项的滚动区域.我们可以通过JavaScript的一些帮助交换类名来将两者结合在一起.

总结

以上是内存溢出为你收集整理的html – Css3：剪切父级和双列子级：混合平衡和非平衡列填充全部内容，希望文章能够帮你解决html – Css3：剪切父级和双列子级：混合平衡和非平衡列填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。