1

我正在使用 display:table 和 display:table-cell 来构建我的列。

是否可以在另一列中的一列跨 2 列？

我尝试了 column-span: all 但这似乎不起作用？

http://jsfiddle.net/infatti/sSK8u/

.column-container {
  display: table;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.column-container .col-5-with-rule {
  display: table-cell;
  vertical-align: top;
  width: 150px;
  border-left: none;
  padding-left: 0;
  padding-right: 9px;
}
.column-container .col-5-with-rule ~ .col-5-with-rule {
  border-left: 1px solid #d1d1d1;
  padding-left: 9px;
  padding-right: 9px;
}

.column-container .col-span-2 {
  column-span: all;
}

<div class="column-container"><!-- columns container -->
  <div class="col-5-with-rule"><!-- column -->
    <p>Table cell</p>
      <div class="col-span-2"><!-- column span -->
        <p>Make me span into 2 columns.</p>
      </div><!-- #column span -->
  </div><!-- #column -->
  <div class="col-5-with-rule"><!-- column -->
    <p>Table cell</p>
  </div><!-- #column -->
</div><!-- #columns container -->
4

2 回答 2

1

根据您想在其中使用它的上下文，您可以使用 Bootstrap 构建您的网格。

这是使用 Bootstrap 3 实现您想要的 HTML 标记

<div class = "row">
    <div class = "col-xs-2">
        Table cell
    </div>
    <div class = "col-xs-2">
        Table cell
    </div>
</div>
<div class = "row">
    <div class = "col-xs-4">
        Make me span into 2 columns.        
    </div>
</div>

在这里提琴

Bootstrap 2 的标记

<div class = "row">
    <div class = "span2">
        Table cell
    </div>
    <div class = "span2">
        Table cell
    </div>
</div>
<div class = "row">
    <div class = "span4">
        Make me span into 2 columns.        
    </div>
</div>

小提琴

于 2013-11-07T22:49:28.040 回答
0

您可以将col-span-2s 位置设置为绝对位置，然后将其定位到任何您想要的位置。

小提琴：http: //jsfiddle.net/sSK8u/2/

于 2013-11-07T22:42:24.710 回答