html - 如何使 div 表的列延伸到整个长度？

Question

有以下问题。我需要制作一个表格，其中的列将延伸到整个 div block 容器的长度，因此它看起来像这样:

但是，我现在的情况是这样的:

我使用的代码是:

  <div class="widgetright">
     <div class="widgettext">
     <b>This free independent travel guide to Russia</b> exists thanks to the commission we get when you order these <b>hand-picked trusted third-party services</b> or when you <b><a href="/book/">buy our book</a></b>. Please, support us!
     </div>
     &nbsp;<br>
     <div class="widgetable">
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/Travel/VisaSupport.html">russian visa</a></div><div class="gapper">           </div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/TrainTickets.html">train tickets</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/book/">guide book</a></div><div class="gapper"></div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/Accommodation.html">hotels</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     </div>

CSS 是:

.widgetright {
    border-bottom: 1px solid #b7b7b7;
}
.widgettext {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.widgettext a{
    text-decoration: none;
    color: #333;
}

.widgettable {
    position: relative;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 20px;

}

.widgetrow {
    position: relative;
    width: 100%;
    display:table-row;

}
.widgetbars {
    width: 40%;
    height: 32px;
    background-color: #dfdfdf;
    display:table-cell;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #333;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;

}

.widgetbars a {
    color: #333;
}

.widgetbars a:hover {
    color: #02aace;
    text-decoration: underline;

}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}

.gapper {
    display: table-cell;
    width: 20px;
}
.vertgapper {
    display:table-row;

    height: 10px;

}

谢谢!

Answer 1

您需要将 display:table 添加到 .widgetable。

由于您使用的是表格行，因此在父元素上使用表格有助于模仿表格结构。

添加之后，只需快速修复拼写问题 -- 您在 css 中有 widgettable(带有两个 T)，以及一个名为 widgetable 的类(带有一个 T ) 在你的实际元素上。

.widgetright {
    border-bottom: 1px solid #b7b7b7;
}
.widgettext {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.widgettext a{
    text-decoration: none;
    color: #333;
}

.widgetable {
    position: relative;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 20px;
    display:table;
}

.widgetrow {
    position: relative;
    width: 100%;
    display:table-row;

}
.widgetbars {
    width: 40%;
    height: 32px;
    background-color: #dfdfdf;
    display:table-cell;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #333;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;

}

.widgetbars a {
    color: #333;
}

.widgetbars a:hover {
    color: #02aace;
    text-decoration: underline;

}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}

.gapper {
    display: table-cell;
    width: 20px;
}
.vertgapper {
    display:table-row;

    height: 10px;

}

<div class="widgetright">
     <div class="widgettext">
     <b>This free independent travel guide to Russia</b> exists thanks to the commission we get when you order these <b>hand-picked trusted third-party services</b> or when you <b><a href="/book/">buy our book</a></b>. Please, support us!
     </div>
     &nbsp;<br>
     <div class="widgetable">
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/Travel/VisaSupport.html">russian visa</a></div><div class="gapper">           </div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/TrainTickets.html">train tickets</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/book/">guide book</a></div><div class="gapper"></div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/Accommodation.html">hotels</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     </div>