0

我正在使用 SmartAdmin。我有一个使用左标签的小部件。在右侧，我试图让 DataTables 表占据剩余宽度的 100%。目前，表格占据了父 div 的 100% 宽度，并且位于左侧选项卡的下方。

智能管理： 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

您可以将 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 回答
1

这看起来像是在一个区域中需要多个列的一个非常简单和干燥的案例。对于纯 CSS 解决方案，您有很多选择。

给定以下标记：

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

带浮动的百分比宽度：

.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;
}

固定和百分比宽度与浮动：

.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 回答