CSS列打破列之间的边界
[英]CSS Columns break border between columns
问题描述
Please reference this fiddle for a demo for my question. 
请参考这个小提琴以获得有关我的问题的演示。
TL;DR: I'm looking for a way for the purple border to go as high as the green border (so that the purple border masks the green by overlap). TL; DR：我正在寻找一种使紫色边框与绿色边框一样高的方法（以便紫色边框通过重叠覆盖绿色）。 I'm looking for any creative solution, hacks included. 我正在寻找任何有创意的解决方案，包括黑客。
More specifically, for this application in the <section> box there is a <ul> which is populated dynamically varying amounts of items. 更具体地说，对于此应用程序，在<section>框中有一个<ul> ，它动态地填充了数量不等的物品。 The design approved by the client has a space in the horizontal top-border between the columns. 客户认可的设计在两列之间的水平顶部边框中有一个空间。 Because the amount of items in the list varies I'm avoiding using <div> s with floats for columns. 因为列表中项目的数量各不相同，所以我避免将<div>与列的浮点数一起使用。 I can't find any CSS rules for this and all the other articles I've read are about how to create vertical borders (which I have made purple in the demo for an easy visual), but I can't determine if it's possible to make those borders overlap the parent's outer border. 我找不到关于此的任何CSS规则，并且我阅读的所有其他文章都涉及如何创建垂直边框（为方便观看，我在演示中将其显示为紫色），但我无法确定是否可能使这些边框与父级的外部边框重叠。
Edited for clarity 2015-09-27 17:29 UTC-5 为了清楚起见而编辑2015-09-27 17:29 UTC-5
1 个解决方案
解决方案1
0 2015-09-27 23:11:54
Using the "column-rules" property familly doesn't appear to offer what you need. 使用“ column-rules”属性似乎并不能满足您的需求。 In my opinion, I would do something like the fiddle below. 我认为，我会做类似下面的小提琴。 I agree, it's not very optimised for semantic, and it will not works alone for managing the columns number. 我同意，它在语义上不是很优化，并且不能单独用于管理列号。
Maybe you can make something in PHP to change the columns number regarding the number of items before generationg your page. 也许您可以在PHP中进行一些操作，以在生成页面之前更改有关项目数的列数。 If you're not working with PHP, a little JS function can do the formatting for you :) 如果您不使用PHP，则可以使用一个JS小功能来格式化：)
/*.list-group > li { list-style: none; } section.row > div { margin: 0 !important; display: inline-block; border: solid 4px #88d0cd; border-right: solid 4px #FF00FF; } section > div:last-child { border-left: none; } section > div:not(:last-child) { border-left: none; }*/ .row { width: 90%; margin: auto; } .row > .col { float : left; width: 30%; } .col > ul { -webkit-margin-before: 0; -webkit-margin-after: 0; padding: 1em 0 1em 2em; border-top: solid 4px #88d0cd; border-bottom: solid 4px #88d0cd; } .col:first-child { border-left: solid 4px #88d0cd; } .col:last-child { border-right: solid 4px #88d0cd; } .col:not(:last-child) { border-right: solid 4px #FF00FF; } .col:not(:last-child) > ul { border-right: none; }
<html> <head> </head> <body> <section class="row"> <div class="col"> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> </div> <div class="col"> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> </div> <div class="col"> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> </div> </section> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.