小编jbe*_*jbe的帖子

使网格项跨越到最后一行/列

当我不知道行数时,是否可以使网格项从第一行跨越到最后一行?

可以说我有以下html与未知数量的框.

如何.box从第一个网格线到最后一个网格线进行第三次跨度?

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 css-grid

32
推荐指数
3
解决办法
1万
查看次数

Toastr“选项”不起作用

我使用 Toastr 创建通知消息。我的通知消息已显示,但我无法使用任何选项,我设置了一些选项,但它们不起作用。

$('#editButton').click(function() {
  toastr.success('System successfully saved');
  toastr.options.timeOut = 5000;
  toastr.options.positionClass = toast - top - center;
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

<button class="button" id="editButton" type="submit" aria-hidden="true">Edit</button>
Run Code Online (Sandbox Code Playgroud)

javascript toastr

2
推荐指数
1
解决办法
6311
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1

html ×1

javascript ×1

toastr ×1