如何用css设置类似表格的div？如何填写“专栏”？

Question

我需要在bootstrap列中创建这样的东西：

我能做的最好的就是使用这样的html：

<div class="row">
   <div class="col-xs-2 event-date-container">
       <p class="event-date">OCT 4</p>
   </div>
   <div class="col-xs-10">
       <p class="color-text-green">ALL CAMPUSES</p>
       <p>Ada dua ekor serigala di hutan</p>
   </div>
</div>
<div class="row">
   <div class="col-xs-2 event-date-container">
       <p class="event-date">OCT 18</p>
   </div>
   <div class="col-xs-10">
       <p class="color-text-green">ALL CAMPUSES</p>
       <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
   </div>
</div>

使用css：

event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
event-date-container {
    padding: 5px;
    background-color: gray;
}

并且颜色文字为绿色以使颜色为绿色是这样的：

如何用完整的背景颜色填充第一列？我可以用什么其他技巧来改善这个？

Answer 1

使用默认的Bootstrap网格系统无法实现您的目标。每个.col-*-*只会占用所需的高度，因为它是float。

如果可能的话，我会使用表格样式来实现您想要的效果。由于你正在做什么是一个表，为什么不简单地使用Bootstrap表样式？

使用<table>

http://jsfiddle.net/spjm90cf/1/

HTML：

<table class="table event-table">
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 4</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </td>
    </tr>
    <tr>
       <td class="event-date-container">
           <p class="event-date">OCT 18</p>
       </td>
       <td>
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </td>
    </tr>
</table>

CSS：

/* Remove Bootstrap's dividing lines */
.event-table > tbody > tr > td {
    border-width: 0;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}

操纵网格系统

http://jsfiddle.net/spjm90cf/2/

如果由于某种原因无法使用表格，可以采用以下方式将.row和.col-*-*样式化为类似于表格的结构：

HTML（您将需要一个容器作为＆＃34;表＆＃34;）：

<div class="container-table">
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 4</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan</p>
       </div>
    </div>
    <div class="row">
       <div class="col-xs-2 event-date-container">
           <p class="event-date">OCT 18</p>
       </div>
       <div class="col-xs-10">
           <p class="color-text-green">ALL CAMPUSES</p>
           <p>Ada dua ekor serigala di hutan belantara, serigala B menantang serigala A</p>
       </div>
    </div>
</div>

CSS：

.container-table {
    display: table; 
    width: 100%;
}

.container-table .row {
    display: table-row;
}

.container-table [class^="col-"] {
    display: table-cell;
    float: none;
}

.event-date {
    text-align: center;
    font-family: fantasy;
    color: #222222;
}
.event-date-container {
    padding: 5px;
    background-color: gray;
}

Answer 2

一个简单的解决方案就是使用flexbox：

.row { display: flex; }

jsfiddle：https://jsfiddle.net/DTcHh/14095/

虽然您可能想要更改您的html / css。这是一篇关于使用flexbox填充父容器高度的好文章：https://css-tricks.com/boxes-fill-height-dont-squish/

Answer 3

我会尝试这个：

.row > div:first-child {
/* your code */
}

此代码将使用class＆＃34; row＆＃34;

为div中的每个第一个div添加属性