相关疑难解决方法(0)

以CSS网格为中心

我正在尝试使用CSS Grid创建一个简单的页面.

我没有做的是将文本从HTML中心放到相应的网格单元格中.

我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg

我该怎么做呢？

html,
body {
  margin: 0;
  padding: 0;
}

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

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center; …

Run Code Online (Sandbox Code Playgroud)

html css css3 centering css-grid

bee*_*oot

2017 08-10

115
推荐指数

6
解决办法

12万
查看次数

伪元素打破了对齐内容:flexbox布局中的空格

我在父div中有三个div,它们使用以下方式间隔开:

display: flex;
justify-content: space-between;

Run Code Online (Sandbox Code Playgroud)

但是,父div有一个:afteron,它使得三个div不会出现在父div的边缘.有没有办法让flexbox忽略:before和:after？

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css css3 pseudo-element flexbox

Lan*_*all

2016 12-06

14
推荐指数

2
解决办法

1万
查看次数

消除网格间隙

我有一个元素排列成一行的 div，这是它的 css 类：

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="myRow">
  <div style="color:blue; width: 5px;">aa</div>
  <div style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

Run Code Online (Sandbox Code Playgroud)

我希望能够消除前两个间隙并保留其余间隙，就像grid-template-columns工作原理一样。

可以用网格来做到这一点吗？

编辑：我希望它是这样的：

html css css-grid

shi*_*zou

2018 05-25

3
推荐指数

2
解决办法

8071
查看次数

CSS GRID 避免在网格中使用 ::before 和 ::after

当我使用 CSS Grid 时，网格如何将之前和之后作为网格元素。有什么办法可以解决这个问题吗？

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.wrapper::before {
  content: "::before element";
}

.wrapper::after {
  content: "::after element";
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Run Code Online (Sandbox Code Playgroud)

css css-grid

Elr*_*des

2018 10-04

1
推荐指数

1
解决办法

3057
查看次数