Flexbox以相同的方式放置所有内容。有什么办法可以使其行为有所不同？
我有一些使用我的工具之一自动生成的代码。它生成HTML / CSS和JS。它生成了这个小仪表板，如屏幕截图所示：
它基于flexbox，因为它允许我轻松地放置表格，但是缺点是它实际上以这种方式放置任何东西。将我想在表格上添加的简单文本添加到表格上的方式与对表格的处理方式相同。这不是最佳的。
我如何使它起作用，以便可以在表上放置文本或其他类型的数据？
此处的完整代码：https://codepen.io/przemyslawklys/pen/xevoJN
相关部分：
CSS：
<style type="text/css">
div.defaultSection {
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
div.defaultColumn {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding: 2px;
}
.defaultContainer {
display: flex;
justify-content: space-between;
padding: 2px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.defaultContainerOther {
display: flex;
justify-content: space-between;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.defaultPanelOther {
flex-basis: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.defaultPanel {
flex-basis: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
HTML：
<div id="15301525" class="defaultContainerOther">
<div class="defaultContainer defaultPanelOther collapsable" id="15301525">
<div><span>My Text1</span></div>
<script>
$(document).ready(function () {
// Table code
var table = $('#DT-zHuCxhCV').DataTable({
"dom": "Bfrtip",
"buttons": [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
"colReorder": true,
"paging": true,
"scrollCollapse": false,
"pagingType": [
"full_numbers"
],
"lengthMenu": [
[
15,
25,
50,
100
],
-1,
[
15,
25,
50,
100
],
"All"
],
"ordering": true,
"order": [
],
"info": true,
"procesing": true,
"responsive": {
"details": true
},
"select": true,
"searching": true,
"stateSave": true
});
});
</script>
<div class="defaultPanelOther">
<table id="DT-zHuCxhCV" class="display compact">
<thead>
<tr>
<th>Name</th>
<th>Id</th>
<th>PriorityClass</th>
<th>FileVersion</th>
<th>HandleCount</th>
<th>WorkingSet</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
<th>TotalProcessorTime</th>
<th>SI</th>
<th>Handles</th>
<th>VM</th>
<th>WS</th>
<th>PM</th>
<th>NPM</th>
<th>Path</th>
<th>Company</th>
<th>CPU</th>
<th>ProductVersion</th>
<th>Description</th>
<th>Product</th>
<th>__NounName</th>
<th>BasePriority</th>
<th>ExitCode</th>
<th>HasExited</th>
<th>ExitTime</th>
<th>Handle</th>
<th>SafeHandle</th>
<th>MachineName</th>
<th>MainWindowHandle</th>
<th>MainWindowTitle</th>
<th>MainModule</th>
<th>MaxWorkingSet</th>
<th>MinWorkingSet</th>
<th>Modules</th>
<th>NonpagedSystemMemorySize</th>
<th>NonpagedSystemMemorySize64</th>
<th>PagedMemorySize64</th>
<th>PagedSystemMemorySize</th>
<th>PagedSystemMemorySize64</th>
<th>PeakPagedMemorySize</th>
<th>PeakPagedMemorySize64</th>
<th>PeakWorkingSet</th>
<th>PeakWorkingSet64</th>
<th>PeakVirtualMemorySize</th>
<th>PeakVirtualMemorySize64</th>
<th>PriorityBoostEnabled</th>
<th>PrivateMemorySize64</th>
<th>PrivilegedProcessorTime</th>
<th>ProcessName</th>
<th>ProcessorAffinity</th>
<th>Responding</th>
<th>SessionId</th>
<th>StartInfo</th>
<th>StartTime</th>
<th>SynchronizingObject</th>
<th>Threads</th>
<th>UserProcessorTime</th>
<th>VirtualMemorySize64</th>
<th>EnableRaisingEvents</th>
<th>StandardInput</th>
<th>StandardOutput</th>
<th>StandardError</th>
<th>WorkingSet64</th>
<th>Site</th>
<th>Container</th>
</tr>
</thead>
<tbody>
<tr>
<td>1Password</td>
<td>16904</td>
<td>Normal</td>
<td>7.3.684</td>
<td>743</td>
<td>40570880</td>
<td>48590848</td>
<td>48590848</td>
<td>302575616</td>
<td>00:00:01.1718750</td>
<td>1</td>
<td>743</td>
<td>302575616</td>
<td>40570880</td>
<td>48590848</td>
<td>39640</td>
<td>C:\Users\przemyslaw.klys\AppData\Local\1password\app\7\1Password.exe</td>
<td>AgileBits Inc.</td>
<td>1,171875</td>
<td>7.3.684</td>
<td>1Password for Windows desktop</td>
<td>1Password</td>
<td>Process</td>
<td>8</td>
<td></td>
<td>False</td>
<td></td>
<td>7856</td>
<td>Microsoft.Win32.SafeHandles.SafeProcessHandle</td>
<td>.</td>
<td>0</td>
<td></td>
<td>System.Diagnostics.ProcessModule (1Password.exe)</td>
<td>1413120</td>
<td>204800</td>
<td>System.Diagnostics.ProcessModuleCollection</td>
<td>39640</td>
<td>39640</td>
<td>48590848</td>
<td>459488</td>
<td>459488</td>
<td>49123328</td>
<td>49123328</td>
<td>61747200</td>
<td>61747200</td>
<td>326172672</td>
<td>326172672</td>
<td>True</td>
<td>48590848</td>
<td>00:00:00.4375000</td>
<td>1Password</td>
<td>65535</td>
<td>True</td>
<td>1</td>
<td>System.Diagnostics.ProcessStartInfo</td>
<td>01.05.2019 21:11:22</td>
<td></td>
<td>System.Diagnostics.ProcessThreadCollection</td>
<td>00:00:00.7343750</td>
<td>302575616</td>
<td>False</td>
<td></td>
<td></td>
<td></td>
<td>40570880</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Id</th>
<th>PriorityClass</th>
<th>FileVersion</th>
<th>HandleCount</th>
<th>WorkingSet</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
<th>TotalProcessorTime</th>
<th>SI</th>
<th>Handles</th>
<th>VM</th>
<th>WS</th>
<th>PM</th>
<th>NPM</th>
<th>Path</th>
<th>Company</th>
<th>CPU</th>
<th>ProductVersion</th>
<th>Description</th>
<th>Product</th>
<th>__NounName</th>
<th>BasePriority</th>
<th>ExitCode</th>
<th>HasExited</th>
<th>ExitTime</th>
<th>Handle</th>
<th>SafeHandle</th>
<th>MachineName</th>
<th>MainWindowHandle</th>
<th>MainWindowTitle</th>
<th>MainModule</th>
<th>MaxWorkingSet</th>
<th>MinWorkingSet</th>
<th>Modules</th>
<th>NonpagedSystemMemorySize</th>
<th>NonpagedSystemMemorySize64</th>
<th>PagedMemorySize64</th>
<th>PagedSystemMemorySize</th>
<th>PagedSystemMemorySize64</th>
<th>PeakPagedMemorySize</th>
<th>PeakPagedMemorySize64</th>
<th>PeakWorkingSet</th>
<th>PeakWorkingSet64</th>
<th>PeakVirtualMemorySize</th>
<th>PeakVirtualMemorySize64</th>
<th>PriorityBoostEnabled</th>
<th>PrivateMemorySize64</th>
<th>PrivilegedProcessorTime</th>
<th>ProcessName</th>
<th>ProcessorAffinity</th>
<th>Responding</th>
<th>SessionId</th>
<th>StartInfo</th>
<th>StartTime</th>
<th>SynchronizingObject</th>
<th>Threads</th>
<th>UserProcessorTime</th>
<th>VirtualMemorySize64</th>
<th>EnableRaisingEvents</th>
<th>StandardInput</th>
<th>StandardOutput</th>
<th>StandardError</th>
<th>WorkingSet64</th>
<th>Site</th>
<th>Container</th>
</tr>
</tfoot>
</table>
</div>
<div><span>My Text2</span></div>
<script>
$(document).ready(function () {
// Table code
var table = $('#DT-BTfLHCYx').DataTable({
"dom": "Bfrtip",
"buttons": [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
"colReorder": true,
"paging": true,
"scrollCollapse": false,
"pagingType": [
"full_numbers"
],
"lengthMenu": [
[
15,
25,
50,
100
],
-1,
[
15,
25,
50,
100
],
"All"
],
"ordering": true,
"order": [
],
"info": true,
"procesing": true,
"responsive": {
"details": true
},
"select": true,
"searching": true,
"stateSave": true
});
});
</script>
<div class="defaultPanelOther">
<table id="DT-BTfLHCYx" class="display compact">
<thead>
<tr>
<th>Name</th>
<th>Id</th>
<th>PriorityClass</th>
<th>FileVersion</th>
<th>HandleCount</th>
<th>WorkingSet</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
<th>TotalProcessorTime</th>
<th>SI</th>
<th>Handles</th>
<th>VM</th>
<th>WS</th>
<th>PM</th>
<th>NPM</th>
<th>Path</th>
<th>Company</th>
<th>CPU</th>
<th>ProductVersion</th>
<th>Description</th>
<th>Product</th>
<th>__NounName</th>
<th>BasePriority</th>
<th>ExitCode</th>
<th>HasExited</th>
<th>ExitTime</th>
<th>Handle</th>
<th>SafeHandle</th>
<th>MachineName</th>
<th>MainWindowHandle</th>
<th>MainWindowTitle</th>
<th>MainModule</th>
<th>MaxWorkingSet</th>
<th>MinWorkingSet</th>
<th>Modules</th>
<th>NonpagedSystemMemorySize</th>
<th>NonpagedSystemMemorySize64</th>
<th>PagedMemorySize64</th>
<th>PagedSystemMemorySize</th>
<th>PagedSystemMemorySize64</th>
<th>PeakPagedMemorySize</th>
<th>PeakPagedMemorySize64</th>
<th>PeakWorkingSet</th>
<th>PeakWorkingSet64</th>
<th>PeakVirtualMemorySize</th>
<th>PeakVirtualMemorySize64</th>
<th>PriorityBoostEnabled</th>
<th>PrivateMemorySize64</th>
<th>PrivilegedProcessorTime</th>
<th>ProcessName</th>
<th>ProcessorAffinity</th>
<th>Responding</th>
<th>SessionId</th>
<th>StartInfo</th>
<th>StartTime</th>
<th>SynchronizingObject</th>
<th>Threads</th>
<th>UserProcessorTime</th>
<th>VirtualMemorySize64</th>
<th>EnableRaisingEvents</th>
<th>StandardInput</th>
<th>StandardOutput</th>
<th>StandardError</th>
<th>WorkingSet64</th>
<th>Site</th>
<th>Container</th>
</tr>
</thead>
<tbody>
<tr>
<td>1Password</td>
<td>16904</td>
<td>Normal</td>
<td>7.3.684</td>
<td>743</td>
<td>40570880</td>
<td>48590848</td>
<td>48590848</td>
<td>302575616</td>
<td>00:00:01.1718750</td>
<td>1</td>
<td>743</td>
<td>302575616</td>
<td>40570880</td>
<td>48590848</td>
<td>39640</td>
<td>C:\Users\przemyslaw.klys\AppData\Local\1password\app\7\1Password.exe</td>
<td>AgileBits Inc.</td>
<td>1,171875</td>
<td>7.3.684</td>
<td>1Password for Windows desktop</td>
<td>1Password</td>
<td>Process</td>
<td>8</td>
<td></td>
<td>False</td>
<td></td>
<td>7856</td>
<td>Microsoft.Win32.SafeHandles.SafeProcessHandle</td>
<td>.</td>
<td>0</td>
<td></td>
<td>System.Diagnostics.ProcessModule (1Password.exe)</td>
<td>1413120</td>
<td>204800</td>
<td>System.Diagnostics.ProcessModuleCollection</td>
<td>39640</td>
<td>39640</td>
<td>48590848</td>
<td>459488</td>
<td>459488</td>
<td>49123328</td>
<td>49123328</td>
<td>61747200</td>
<td>61747200</td>
<td>326172672</td>
<td>326172672</td>
<td>True</td>
<td>48590848</td>
<td>00:00:00.4375000</td>
<td>1Password</td>
<td>65535</td>
<td>True</td>
<td>1</td>
<td>System.Diagnostics.ProcessStartInfo</td>
<td>01.05.2019 21:11:22</td>
<td></td>
<td>System.Diagnostics.ProcessThreadCollection</td>
<td>00:00:00.7343750</td>
<td>302575616</td>
<td>False</td>
<td></td>
<td></td>
<td></td>
<td>40570880</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Id</th>
<th>PriorityClass</th>
<th>FileVersion</th>
<th>HandleCount</th>
<th>WorkingSet</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
<th>TotalProcessorTime</th>
<th>SI</th>
<th>Handles</th>
<th>VM</th>
<th>WS</th>
<th>PM</th>
<th>NPM</th>
<th>Path</th>
<th>Company</th>
<th>CPU</th>
<th>ProductVersion</th>
<th>Description</th>
<th>Product</th>
<th>__NounName</th>
<th>BasePriority</th>
<th>ExitCode</th>
<th>HasExited</th>
<th>ExitTime</th>
<th>Handle</th>
<th>SafeHandle</th>
<th>MachineName</th>
<th>MainWindowHandle</th>
<th>MainWindowTitle</th>
<th>MainModule</th>
<th>MaxWorkingSet</th>
<th>MinWorkingSet</th>
<th>Modules</th>
<th>NonpagedSystemMemorySize</th>
<th>NonpagedSystemMemorySize64</th>
<th>PagedMemorySize64</th>
<th>PagedSystemMemorySize</th>
<th>PagedSystemMemorySize64</th>
<th>PeakPagedMemorySize</th>
<th>PeakPagedMemorySize64</th>
<th>PeakWorkingSet</th>
<th>PeakWorkingSet64</th>
<th>PeakVirtualMemorySize</th>
<th>PeakVirtualMemorySize64</th>
<th>PriorityBoostEnabled</th>
<th>PrivateMemorySize64</th>
<th>PrivilegedProcessorTime</th>
<th>ProcessName</th>
<th>ProcessorAffinity</th>
<th>Responding</th>
<th>SessionId</th>
<th>StartInfo</th>
<th>StartTime</th>
<th>SynchronizingObject</th>
<th>Threads</th>
<th>UserProcessorTime</th>
<th>VirtualMemorySize64</th>
<th>EnableRaisingEvents</th>
<th>StandardInput</th>
<th>StandardOutput</th>
<th>StandardError</th>
<th>WorkingSet64</th>
<th>Site</th>
<th>Container</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
更改结构：
不要在.defaultContainer.defaultPanelOther.collapsable中添加文本，而在子.defaultPanelOther中添加文本
更改
<div class="defaultContainer defaultPanelOther collapsable" id="15301525">
<script>/* ... */</script>
<div><span>My Text1</span></div>
<div class="defaultPanelOther"><!-- ... --></div>
</div>
到
<div class="defaultContainer defaultPanelOther collapsable" id="15301525">
<script>/* ... */</script>
<div class="defaultPanelOther">
<div><span>My Text1</span></div><!-- <<<--- Moved into -->
<!-- ... -->
</div>
</div>
请参见https://codepen.io/HerrSerker/pen/ZZggeN
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？