相关疑难解决方法(0)

使div在网格中跨越两行

我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.

我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

以下是我希望从上面的代码段中获得的内容

css css3 grid-layout flexbox css-grid

Pau*_*lCo

2018 01-11

11
推荐指数

2
解决办法

6091
查看次数

在CSS Grid Layout中为每列添加滚动

我希望在我的网格布局中的每个列上单独滚动.

目前,我正在开发一个仅限移动的Web应用程序.我想为纵向和横向使用不同的网格布局.

纵向方向只有1列,每个元素都在另一列之后.这里没问题.

在横向方向,我想使用2列.我的整个内容显示在左侧,导航移动到右侧.现在我希望两个部分都有一个单独的滚动.有没有办法实现这个？如果当前列的内容结束,则滚动应该停止.

CodePen上的代码:https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer { …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox css-grid

Sud*_*ust

2017 05-17

6
推荐指数

2
解决办法

2万
查看次数