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を使用して線を垂直に延長するにはどうすればよいですか？

ノート。HTML/CSSをPDFに変換するクラスであるmPDFと一緒に使っています。mPDFではborder-radiusをテーブル要素に適用できないため、div-solutionを実行しています。

4

3 に答える 3

2

表形式のデータであるため、<table>withを使用し、border-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ソリューションではありませんが、.box1rowにrepeat-yを使用して1pxのbackground-imageを適用することで問題を解決できます。.nu​​mberにはすでに固定幅があるため、背景画像を正しく配置して境界線を置き換えることができます。

于 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 に答える