用CSS扩展边界线

Question

问题：

我正在尝试扩展每个div的边界线，使其具有完整高度，请参见下图：

HTML code：

<div class="wrapper">
    <div class="box1row box1top">
        <div class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></div>
        <div class="numbers">1.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</div>
    </div>
    <div class="box1row box1bottom">
        <div class="arrow">&nbsp;</div>
        <div class="numbers">2.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</div>
    </div>
</div>

CSS代码：

.wrapper {
    margin-bottom: 1.5em;
}

.arrow {
    display: block;
    float: left;
    border-right: 1px solid #ddd;
    width:40px;
    text-align:center;
    padding-top:5px;
}

.arrowimage {
    width: 16px;
    height: 16px;
}

.text {
    display: block;
    float:left;
    border-left: 1px solid #ddd;
    width:585px;
    padding-left:5px;
    margin-left: -1px;
}

.numbers {
    display: block;
    float:left;
    border-left: 1px solid #ddd;
    width:30px;
    text-align:center;
    margin-left: -1px;
}

.box1row {
    border: 1px solid #ddd;
    margin-bottom: -1px;
}

.box1top {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.box1bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

问题：

如何使用CSS垂直延伸线？

注意。我和mPDF一起使用它是一个将HTML / CSS转换为PDF的类。 mPDF不允许将border-radius应用于表元素，因此我正在进行div解决方案。

Answer 1

由于表格数据使用带有<table>的{​​{1}}并关闭所有外边框：

HTML

border-collapse:collapse

CSS

<div class="wrapper">
  <table>
    <tr>        
        <td class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></td>
        <td class="numbers">1.</td>
        <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</td>
    </tr>
         <! -- ...... -->
    <tr>
        <td class="arrow">&nbsp;</td>
        <td class="numbers">2.</td>
        <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</td>
    </tr>
 </table>
</div>

然后，您可以在/* collapse all borders */ .wrapper table{ width:100%; border-collapse:collapse; } /* activate all borders */ .wrapper table td { border:1px solid #ddd; } /* turn off unnecessary borders: */ .wrapper table tr:first-child td{ border-top:none; } .wrapper table tr:last-child td{ border-bottom:none; } .wrapper table tr td:last-child{ border-right:none; } .wrapper table tr td:first-child{ border-left:none; } /* other elements */ .arrow { width:40px; text-align:center; padding-top:5px; } .arrowimage { width: 16px; height: 16px; } .text { width:585px; padding-left:5px; } .numbers { width:30px; text-align:center; } 上使用rounded borders来实现border-radius效果：

.wrapper

JSFiddle Demo

Answer 2

虽然不是纯CSS解决方案，但可以通过将带有repeat-y的1px背景图像应用于.box1row来解决问题。您已经在.number上有固定的宽度，因此可以正确定位背景图像以替换边框。

Answer 3

鉴于我的第一个建议（在评论中）不起作用，因为它与mPDF不相配，另一种可能性是使用display:table-cell而不是浮动你的元素：

.wrapper {
    margin-bottom: 1.5em;
}
.arrow {
    display: table-cell;
    width:40px;
    text-align:center;
    padding-top:5px;
}
.arrowimage {
    width: 16px;
    height: 16px;
}
.text {
    display: table-cell;
    border-left: 1px solid #ddd;
    width:585px;
    padding-left:5px;
    margin-left: -1px;
}
.numbers {
    display: table-cell;
    border-left: 1px solid #ddd;
    width:30px;
    text-align:center;
    margin-left: -1px;
}
.box1row {
    border: 1px solid #ddd;
    margin-bottom: -1px;
    display: table;
}
.box1top {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.box1bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

Updated demo

我不确定mPDF会怎么样，请记住它不兼容IE7。

否则，如果您的数据在语义上符合表格，那么您可以将其标记为表格，我想这不会给mPDF带来任何悲伤。