如何使用 css 设计 table-like div 的样式？如何填一个"column"？

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

我会试试这个：

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

此代码将为 div 和 class "row"

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

Answer 2

默认的 Bootstrap 网格系统无法实现您想做的事情。每个 .col-*-* 将只占用它需要的高度，因为它是 floated.

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

使用`<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/

如果您由于某种原因不能使用 table，这里有一种将 .row 和 .col-*-* 样式化为类似 table 的结构的方法：

HTML（你需要一个容器来充当"table"）：

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

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

.row { display: flex; }

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

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

如何使用 css 设计 table-like div 的样式？如何填一个"column"？

How to style a table-like div with css? How to fill a "column"?

html

css

twitter-bootstrap

使用`<table>`

操纵网格系统

如何使用 css 设计 table-like div 的样式？如何填一个"column"？

How to style a table-like div with css? How to fill a "column"?

html

css

twitter-bootstrap

使用<table>

操纵网格系统

使用`<table>`