1

display:table と display:table-cell を使用して列を作成しています。

別の列内の列が 2 つの列にまたがることは可能ですか?

column-span を試しましたが、うまくいきませんか?

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 に答える