Question

我从https://www.layoutit.com/grid#clear为我的网页创建了一个布局。

但是我想删除这些文本框的中心。我尝试了一些操作，但不幸的是没有用。这是我尝试过的

html, body { margin: 15; height: 100% } 
.grid-container * {  }
.grid-container div:after {
    content: attr(class);
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #2A2A2A;
}
.grid-container {  display: grid;  height: 100%;  
                   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
                   grid-template-rows: 1fr 1fr 1fr 1fr; 
                   grid-gap: 10px 10px;  
                   grid-template-areas: 'box1 box1 box2 box2 box3 box4' 'box5 box5 box6 box6 box6 box7' 'box5 box5 box6 box6 box6 box8' 'box9 box10 box11 box12 box13 box14';}
.box1 { grid-area: box1; 
        
}
.box2 { grid-area: box2; }
.box3 { grid-area: box3; }
.box4 { grid-area: box4; }
.box5 { grid-area: box5; }
.box6 { grid-area: box6; }
.box7 { grid-area: box7; }
.box8 { grid-area: box8; }
.box9 { grid-area: box9; }
.box10 { grid-area: box10; }
.box11 { grid-area: box11; }
.box12 { grid-area: box12; }
.box13 { grid-area: box13; }
.box14 { grid-area: box14; }

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>New Pen!</title>
      <link rel="stylesheet" href="css/style.css">
</head>
<body body bgcolor="black">
    <div class='grid-container'>
        <div class='box1'></div>
        <div class='box2'></div>
        <div class='box3'></div>
        <div class='box4'></div>
        <div class='box5'></div>
        <div class='box6'></div>
        <div class='box7'></div>
        <div class='box8'></div>
        <div class='box9'></div>
        <div class='box10'></div>
        <div class='box11'></div>
        <div class='box12'></div>
        <div class='box13'></div>
        <div class='box14'></div>
    </div>
   </body>
</html>

我也尝试将名称放入div中，但不起作用。我会在这些框中放入一些内容，而不是名称。不允许更改框内容，而且我无法理解这些名称的书写位置（box1， box2，box3）

Answer 1

attr将从相关dom中获取属性，在这种情况下，会将其添加到内容中。

将content: attr(class);替换为content: '';

html,
body {
  margin: 15;
  height: 100%
}

.grid-container * {}

.grid-container div:after {
  content: '';
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #2A2A2A;
}

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px 10px;
  grid-template-areas: 'box1 box1 box2 box2 box3 box4' 'box5 box5 box6 box6 box6 box7' 'box5 box5 box6 box6 box6 box8' 'box9 box10 box11 box12 box13 box14';
}

.box1 {
  grid-area: box1;
}

.box2 {
  grid-area: box2;
}

.box3 {
  grid-area: box3;
}

.box4 {
  grid-area: box4;
}

.box5 {
  grid-area: box5;
}

.box6 {
  grid-area: box6;
}

.box7 {
  grid-area: box7;
}

.box8 {
  grid-area: box8;
}

.box9 {
  grid-area: box9;
}

.box10 {
  grid-area: box10;
}

.box11 {
  grid-area: box11;
}

.box12 {
  grid-area: box12;
}

.box13 {
  grid-area: box13;
}

.box14 {
  grid-area: box14;
}

<body body bgcolor="black">
  <div class='grid-container'>
    <div class='box1'></div>
    <div class='box2'></div>
    <div class='box3'></div>
    <div class='box4'></div>
    <div class='box5'></div>
    <div class='box6'></div>
    <div class='box7'></div>
    <div class='box8'></div>
    <div class='box9'></div>
    <div class='box10'></div>
    <div class='box11'></div>
    <div class='box12'></div>
    <div class='box13'></div>
    <div class='box14'></div>
  </div>

Answer 2

只需删除班级content: attr(class);中的.grid-container。请注意，如果您未指定元素的高度和宽度，则结构可能会崩溃。

.grid-container div:after {
    content: attr(class); /* <-- This one */
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #2A2A2A;
}

此属性可用于指定特定容器中要包含的内容。最常用于文本或悬停时更改文本。在这种情况下，它会显示所使用的类的名称。

如何将内容放入布局

2 个答案: