Question

请参阅this fiddle以获取我的问题的演示。

TL; DR：我正在寻找紫色边框与绿色边框一样高的方法（这样紫色边框会通过重叠掩盖绿色）。我正在寻找任何有创意的解决方案，其中包括黑客攻击。

更具体地说，对于<section>框中的此应用程序，有<ul>动态填充不同数量的项目。客户认可的设计在列之间的水平上边界中有一个空格。因为列表中的项目数量不同，所以我避免使用带有浮点数的<div>个列。我无法找到任何CSS规则，我读过的所有其他文章都是关于如何创建垂直边框（我在演示中为了简单的视觉效果而制作了紫色），但我可以＆＃39 ; t确定是否可以使这些边界与父母的外边界重叠。

为了清晰而编辑2015-09-27 17:29 UTC-5

Answer 1

使用“column-rules”属性familly似乎无法满足您的需求。在我看来，我会做类似下面的小提琴。我同意，它没有针对语义进行优化，并且它不能单独用于管理列号。

也许您可以在PHP中创建一些内容，以便在生成页面之前更改有关项目数的列数。如果您不使用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>

CSS列打破了列之间的边界

1 个答案: