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

Question

有以下问题。我需要创建一个包含列的表，这些列将延伸到div块容器的整个长度，所以它看起来像这样：

然而，我现在所拥有的是这样的：

我使用的代码是：

  <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＆＃39;），以及一个名为 widgetable 的类（有一个T）在你的实际元素上。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我试过了：

.widgetbars {
    width: 50%;
    margin-right:30px;
    ...
 }

您可以在此处查看演示：http://jsfiddle.net/4ry7agzp/

Answer 3

<强> HTML

    <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 id="container">  /*New div added. Every thing is wraped inside it*/

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

<强> CSS

#container
{
    display:flex;
    display: -webkit-flex;
    display: -moz-flex;
}

#container > * {
flex: 1 ;
}

希望这有帮助..并查看CSS3的flex属性