努力与CSS网格

Question

我想在a格内将container类的一堆div在一行上水平对齐。

为什么下面的CSS代码不起作用？

.a {
  border: 1px solid black;
}

#container {
  display:grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows:1fr;
}

我为此创建了一个jsFiddle。我期望那里的div 1到6都在同一行，但是我得到以下结果：

Answer 1

您需要将默认流 ^ref 更改为列：

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows: 1fr;
  grid-auto-flow:column; /* added */
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

或定义如下的模板列：

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(10px, 35px));
  grid-template-rows: 1fr;
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

Answer 2

尝试以下代码：

CSS：

UPDATE Master_policy m
INNER JOIN Transaction_log log ON m.policy_number = log.policy_number 
INNER JOIN  (
  Select policy_number, max(date) max_date
  FROM Transaction_log
  GROUP BY policy_number
) t on t.policy_number = m.policy_number 
  AND log.date = t.max_date  
set m.last_trans_type = log.last_trans_type 

注意：它在一行上水平对齐。