时间戳

首页 > 解决方案 > 如何使 CSS 3 中间 div 框居中

html - 如何使 CSS 3 中间 div 框居中

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"

    <title>CSS GRID</title>
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div class="wrapper">
      <div class="box box1"> Header</div>
      <div class="box box2"> Nav</div>
      <div class="box box3">Lorem ipsum dolor sit amet. </div>  
      <div class="box box4"> Lorem ipsum dolor sit amet. </div>
      <div class="box box5"> Lorem ipsum dolor sit amet. </div>
      <div class="box box6"> footer</div>
    </div>  

    
</body>
</html>

    

.wrapper{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(27px, auto);
    grid-gap: .50em;
    justify-items:stretch;
    align-items: stretch;}

.wrapper > div{
  background: #eee;
  padding: 1em;  }
.wrapper > div{
    background: #ddd;}
.box1{
    /*align-self: start;*/
    grid-column: 1/6;
    grid-row: 1/4;}
.box2{
  /*align-self: end;*/
    grid-column: 1/6;
    grid-row: 4/5;}
.box3{
  /*align-self: end;*/
    grid-column: 1;
    grid-row: 5/30;}
.box4{
    grid-column: 2;
    grid-row: 5/30;}
.box5{
    grid-column: 3;
    grid-row: 5/30}
.box6{
    grid-column: 1/6;
    grid-row: 30/30;}

标签： htmlcss

解决方案

问题在grid-row:. 在box1,你有as 6 但实际上只有 4 个。我在这些行前面加了注释box2。box6grid-column-end

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(27px, auto);
  grid-gap: .50em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper>div {
  background: #eee;
  padding: 1em;
}

.wrapper>div {
  background: #ddd;
}

.box1 {
  grid-column: 1/4; /* was grid-column: 1/6 */
  grid-row: 1/4;
}

.box2 {
  grid-column: 1/4; /* was grid-column: 1/6 */
  grid-row: 4/5;
}

.box3 {
  grid-column: 1;
  grid-row: 5/30;
}

.box4 {
  grid-column: 2;
  grid-row: 5/30;
}

.box5 {
  grid-column: 3;
  grid-row: 5/30
}

.box6 {
  grid-column: 1/4; /* was grid-column: 1/6 */
  grid-row: 30/30;
}
<div class="wrapper">
  <div class="box box1"> Header</div>
  <div class="box box2"> Nav</div>
  <div class="box box3">Lorem ipsum dolor sit amet. </div>
  <div class="box box4"> Lorem ipsum dolor sit amet. </div>
  <div class="box box5"> Lorem ipsum dolor sit amet. </div>
  <div class="box box6"> footer</div>
</div>

推荐阅读