Question

使用


    df['instance'] = pandas.Series(['1', '1', '2', '2', '3', '3'])
    df['status'] = pandas.Series(['p', 'p', 'f', 'f', 'f', 'f'])
    df['event'] = pandas.Series(['a', 'b', 'a', 'c', 'a', 'd'])
    df['new_events'] = list(pandas.get_dummies(df['event']).get_values())
    df['new_status'] = list(pandas.get_dummies(df['status']).get_values())

   Output:
      instance status event    new_events new_status
    0        1      p     a  [1, 0, 0, 0]     [0, 1]
    1        1      p     b  [0, 1, 0, 0]     [0, 1]
    2        2      f     a  [1, 0, 0, 0]     [1, 0]
    3        2      f     c  [0, 0, 1, 0]     [1, 0]
    4        3      f     a  [1, 0, 0, 0]     [1, 0]
    5        3      f     d  [0, 0, 0, 1]     [1, 0]

df['instance'] = pandas.Series(['1', '1', '2', '2', '3', '3'])
df['status'] = pandas.Series(['p', 'p', 'f', 'f', 'f', 'f'])
df['event'] = pandas.Series(['a', 'b', 'a', 'c', 'a', 'd'])
df['status'] = df['status'].astype('category')
df['status'].cat.set_categories(['p', 'f'], inplace=True)
df['event'] = df['event'].astype('category')
df['event'].cat.set_categories(df['event'].unique(), inplace=True)
pt = df.pivot(index='instance', columns='event')

Output:
         status               
event         a    b    c    d
instance                      
1             p    p  NaN  NaN
2             f  NaN    f  NaN
3             f  NaN  NaN    f

在小（窄）屏中，两列的宽度不同。我不明白。谢谢您的帮助。

Answer 1

在理想情况下，两个单元的大小相同。

但是每个单元格都有最小尺寸！定义为最小内容宽度。例如：较大的单词，较大的按钮或其中包含的较大图像。

为避免这种情况，应为每个列定义使用minmax(0, 1fr)。它使您可以说1fr（一小部分）是列的最大宽度。

总结起来，请使用以下代码：

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

这里是问题和解决方案的实时演示。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid--fix {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Demo styles */
.grid {
  grid-gap: 20px;
  max-width: 400px;
}

.cell {
  background: hotpink;
  text-align: center;
  padding: 1em;
}

<p>Exact same cells</p>
<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
</div>

<p>The cells adapt their size to contain their content</p>
<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>

<p>This behaviour could be disabled with <code>minmax(0, 1fr)</code></p>
<div class="grid grid--fix">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>

网格显示列的宽度不相等

1 个答案: