Html 用CSS扩展边界线_Html_Css_Height_Border_Line

Html 用CSS扩展边界线

html css

Html 用CSS扩展边界线,html,css,height,border,line,Html,Css,Height,Border,Line,问题： <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 c

问题：

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

.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;
}

我试图延伸每个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>

.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;
}

问题：

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

.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解决方案。

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

鉴于我的第一个建议（在评论中）不起作用，因为它不能很好地处理mPDF，另一种可能性是使用

显示：表格单元格

而不是浮动元素：

.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带来任何痛苦。

因为它是表格数据，所以使用

和

边框折叠：折叠

并关闭所有外部边框：

HTML 然后，您可以通过在

包装器上使用边框半径
来实现圆角边框
效果：
.wrapper {
    margin-bottom: 1.5em;    
    border: 1px solid #ddd;
    border-radius: 4px;
}

看看这个问题。我想这个被接受的答案对你会有用的。下面是我为演示应用于您的场景的这项技术而制作的一把小提琴：谢谢您的评论。不幸的是，mPDF不喜欢“填充底部：500em；保证金底部：-500em”。事实上，mPDF一点也不喜欢它，它变得更加凌乱。谢谢你的努力。我非常感谢。由于某些原因，这不起作用，我尝试将背景图像添加到.box1row，但它根本不显示。有什么建议吗？你有任何代码示例吗？虽然在我看来这是一个很好的解决方案，但这段代码不起作用。这是我得到的输出：“定义为position:absolute、position:fixed或float:xxx的块仅部分受支持。”由于浮动也仅部分受支持，您可能必须使用仅使用内部边框的表格，并使用
模拟外部边框。我知道如何将表格放置到位，但如何使用divs使表格边框看起来更圆？@kexxcream:更新了我的答案-您向每个单元格添加边框并删除不需要的边界。如果mPDF了解CSS3选择器，它应该可以工作。不幸的是，它不喜欢CSS3选择器，但除此之外，它是一个很好的解决方案！