使用html表时强制CSS3多列中的列中断_html-js-css

概述我有多列布局工作,现在想让它使用html表(见 http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/)但是只有一个小漏洞：在下一列切割表的情况下,切割可以是中间行..它看起来很可怕当我的页面只是一系列< p>元素,我用了一个简单的样式=“display：inline-block;”将段落的内容保持在一起的技巧,强制列断点在段落之间. 不出所料,这不适我有多列布局工作,现在想让它使用HTML表(见 http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/)但是只有一个小漏洞：在下一列切割表的情况下,切割可以是中间行..它看起来很可怕

当我的页面只是一系列< p>元素,我用了一个简单的样式=“display：inline-block;”将段落的内容保持在一起的技巧,强制列断点在段落之间.

不出所料,这不适用于表格.

我已经尝试过将每个< td>的内容放入进入div,并应用内联块;“样式;我尝试过应用

{  -webkit-column-break-insIDe: avoID;  -moz-column-break-insIDe: avoID;  -moz-page-break-insIDe: avoID;  page-break-insIDe: avoID; }

到< tr> s和< td> s – 没有快乐.

当使用CSS3多列时,有没有人建议让HTML表分成整行

解决方法截至今天,该标准尚未得到很好的实施.我建议用div创建一个伪表,其中行div将避免作为块元素的中断.生成div表就像创建表一样简单.但是它在浏览器上可能更重.

贝娄我展示了一个小例子.我希望它运作良好.是我能设计的唯一解决方案.

<head><style>.columns {position : relative ;column-wIDth: 27em;-moz-column-wIDth: 27em;-webkit-column-wIDth: 27em;column-rule: 2px solID red;-webkit-column-rule: 2px solID red;-moz-column-rule: 2px solID red;column-gap: 12px;-webkit-column-gap: 12px;-moz-column-gap: 12px;}.testerRow {    display : block ;    height : 1em ;    wIDth : 100% ;    margin : 0px ;}div.tl1,div.tl2,div.tl3 {    display : block ;    float : left ;    wIDth : 32.5%;    height : 15px ;    border : 2px solID red ;    border-left : 0px solID red ;    border-top : 0px solID red ;}div.tl1 {    border : 2px solID red ;    border-top : 0px ;}</style></hed><body><div >    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div>    <div >        <div >test</div>        <div >test2</div>        <div >test3</div>    </div></div></body>

可能具有上边框并添加带有CSS3选择器的下边框作为最后一个.testerRow的div子节点将比使用下边框更有效.取决于您的实施.祝好运！

总结

以上是内存溢出为你收集整理的使用html表时强制CSS3多列中的列中断全部内容，希望文章能够帮你解决使用html表时强制CSS3多列中的列中断所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1054975.html