0

SmartAdmin を使用しています。左タブを使用しているウィジェットがあります。右側では、DataTables テーブルが残りの幅の 100% を占めるようにしようとしています。現在、テーブルは親 div の 100% の幅を占め、左側のタブの下にあります。

SmartAdmin: http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/#ajax/dashboard.html

見た目: http://imgur.com/rl8SiUI

どのように見せたいか: http://imgur.com/DkG1S92

JSFiddle: http://jsfiddle.net/xq9mpom6/

Must
Enter
Code
For JSFiddle Link
4

2 に答える 2

1

これは、1 つの領域に複数の列が必要な、非常に単純なケースのように見えます。純粋な CSS ソリューションの場合、多くのオプションがあります。

次のマークアップがあるとします。

<div class='wrapper'>
    <div class='tabs-left'>
        [...]
    </div>
    <div class='data-table'>
        [...]
    </div>
</div>

float を使用したパーセンテージ幅:

.tabs-left {
   width: 10%;
   min-width: 200px;
   float: left;
}
.data-table {
   width: 90%;
   min-width: 720px; // Arbitrary width. Should min-width of parent minus min-width of the left tabs
   float: left;
}

float を使用した固定幅とパーセンテージ幅:

.tabs-left {
   width: 200px;
   float: left;
}
.data-table {
   width: calc(100% - 200px);
   min-width: 720px;
   float: left;
}

Flexbox (ベンダーのプレフィックスが必要です):

.wrapper { 
   display: flex;
   flex-flow: row;
}
.tabs-left {
   width: 200px;
}
.data-table {
   flex-grow 1
}

表示テーブル:

.wrapper { 
   display: table;
   width: 100%;
}
.tabs-left {
   display: table-cell;
   width: 200px;
}
.data-table {
   display: table-cell;
}
于 2015-04-09T00:34:28.367 に答える
1

次のように、親に display:table を使用し、子に display:table-cell を使用できます。

.widget-body {
    display: table;
    width: 100%;
}

.widget-body .tabs-left {
    display: table-cell;
}

.widget-body .dataTables_wrapper {
    display: table-cell;
    vertical-align: top;
}

更新された JS フィドル:

http://jsfiddle.net/xq9mpom6/2/

于 2015-04-09T00:25:54.827 に答える