1

问题：

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

在此处输入图像描述

HTML 代码：

<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 一起使用，mPDF 是一个将 HTML/CSS 转换为 PDF 的类。mPDF 不允许将边框半径应用于表格元素，因此我正在做一个 div 解决方案。

4

3 回答 3

2

由于它是表格数据，因此使用<table>withborder-collapse:collapse并关闭所有外部边框：

HTML

<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>

CSS

/* 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：

.wrapper {
    margin-bottom: 1.5em;    
    border: 1px solid #ddd;
    border-radius: 4px;
}

JSFiddle 演示

于 2012-06-16T09:41:50.180 回答
0

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

于 2012-06-16T09:38:41.113 回答
0

鉴于我的第一个建议（在评论中）不起作用，因为它与 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;
}

更新的演示

我不确定 mPDF 会如何，请记住它不兼容 IE7。

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

于 2012-06-16T09:40:40.540 回答