如何使 div table 的列横跨全长？

Question

遇到以下问题。我需要制作一个 table 的列，这些列将跨越 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

我试过这个：

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

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

Answer 2

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

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

添加后，只需快速修复拼写问题——您在 css 中有 widgettable（有两个 T）和一个class 在您的实际元素上命名为 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>

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

希望这对您有所帮助.. 看看 flex 属性 of CSS3

如何使 div table 的列横跨全长？

How to make columns of a div table stretch across the full length?

html

css

alignment