Question

当我运行此代码时，第一个框和第四个框之间有一行。我正在使用flexbox。我想做两行，每行三项，但是有一排我无法摆脱的空间。我已经尝试了所有可以想到的方法，但是没有任何效果。我已经阅读了有关间距的信息，但是没有任何效果。关于这个问题有什么想法吗？


            <div class="projects">
            <h1 id="project" class="pro">Projects</h1>
            <div class="flex-container">

            <div class="container-fluid p-0 d-flex  justify-content-center d-inline align-content-center">
                  <div class="row " >
                     <div class="col-6 col-sm-2" >

                      <div class="one" style="width: 285px; height: 275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                            </div>
                          </div> </div> </div>


                       <div class="two"style="width: 299px; height: 275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t2">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                            </div>

                        </div> </div> 
                        </div></div>

                        <div class="three "style="width:285px; height:275px;  ">
                                <div class="flip-card">
                                <div class="flip-card-inner">
                                  <div class="flip-card-front t3">
                                    <img class="light" src="light.png">
                                  </div>
                                  <div class="flip-card-back">
                                    <h1>John Doe</h1>
                                    <p>Architect & Engineer</p>
                                    <p>We love that guy</p>
                                </div>

                            </div> </div> 
                            </div></div>




                            <div class="container-fluid p-0 d-flex align-content-center justify-content-center d-inline  ">

                          <div class="row "> 

                                <div class="col-6 col-sm-2" >



                       <div class="four"style="width: 285px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t4">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>

                          </div> </div> 
                          </div></div>





                        <div class="five"style="width: 299px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t5">
                                <img class="light" src="light.png" >
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                            </div>
                          </div></div></div> 

                        <div class="six"style="width: 285px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t6 ">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                          </div></div></div></div></div>


                </div>
            </div>

        </div>

      </div>

CSS

.flip-card, .one,.two,.three,.four,.five,.six {
    background-color: transparent;
    width: 280px;
    height: 275px;
    /*border: 1px solid #f1f1f1;*/
    perspective: 1000px; 


}


  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container*/ 
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing)*/ 
  .flip-card-front, .t3,.t5 {
    background-color:white;
    color: black;
   background-position: top 15px;

  }

   .flip-card-front.t2 ,.t4,.t6 {
    background-color: rgb(248, 122, 4);
    color: black;


  }

  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }
  /*@media screen and (max-width:959px){
  }

/*END FLIP*/
.projects{
    background-color: blueviolet;
    width:100%;
height:680px;
display:block;}


.row{
    justify-content:space-between;
    display:block;



}


I want the boxes to have equal spacing.



.flip-card, .one,.two,.three,.four,.five,.six {
    background-color: transparent;
    width: 280px;
    height: 275px;
    /*border: 1px solid #f1f1f1;*/
    perspective: 1000px; 

  
}


  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do a horizontal flip when you move the mouse over the flip box container*/ 
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing)*/ 
  .flip-card-front, .t3,.t5 {
    background-color:green;
    color: black;
   background-position: top 15px;
  
  }
  
   .flip-card-front.t2 ,.t4,.t6 {
    background-color: rgb(248, 122, 4);
    color: black;
  
  
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }
  /*@media screen and (max-width:959px){
  }

/*END FLIP*/
.projects{
    background-color: blueviolet;
    width:100%;
height:680px;
display:block;}


.row{
    justify-content:space-between;
    display:block;
    

    
}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

            <div class="projects">
            <h1 id="project" class="pro">Projects</h1>
            <div class="flex-container">
            
            <div class="container-fluid p-0 d-flex  justify-content-center d-inline align-content-center">
                  <div class="row ">
                     <div class="col-6 col-sm-2" >
        
                      <div class="one" style="width: 285px; height: 275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                            </div>
                          </div> </div> </div>
                
                      
                       <div class="two"style="width: 299px; height: 275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t2">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                            </div>
                          
                        </div> </div> 
                        </div></div>
            
                        <div class="three "style="width:285px; height:275px;  ">
                                <div class="flip-card">
                                <div class="flip-card-inner">
                                  <div class="flip-card-front t3">
                                    <img class="light" src="light.png">
                                  </div>
                                  <div class="flip-card-back">
                                    <h1>John Doe</h1>
                                    <p>Architect & Engineer</p>
                                    <p>We love that guy</p>
                                </div>
                              
                            </div> </div> 
                            </div></div>
                
                          
                       
                       
                            <div class="container-fluid p-0 d-flex align-content-center justify-content-center d-inline  ">
                
                          <div class="row "> 

                                <div class="col-6 col-sm-2" >
                
                
                    
                       <div class="four"style="width: 285px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t4">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                            
                          </div> </div> 
                          </div></div>


                          

            
                        <div class="five"style="width: 299px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t5">
                                <img class="light" src="light.png" >
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                            </div>
                          </div></div></div> 
                              
                        <div class="six"style="width: 285px; height:275px;">
                            <div class="flip-card">
                            <div class="flip-card-inner">
                              <div class="flip-card-front t6 ">
                                <img class="light" src="light.png">
                              </div>
                              <div class="flip-card-back">
                                <h1>John Doe</h1>
                                <p>Architect & Engineer</p>
                                <p>We love that guy</p>
                              </div>
                          </div></div></div></div></div>
                       
                            
                </div>

Answer 1

我在第二和第三列之间看到一条垂直线。我通过删除此代码段中.flip-card的宽度来删除该代码。

.flip-card,
.one,
.two,
.three,
.four,
.five,
.six {
  background-color: transparent;
  height: 275px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container*/

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing)*/

.flip-card-front,
.t3,
.t5 {
  background-color: white;
  color: black;
  background-position: top 15px;
}

.flip-card-front.t2,
.t4,
.t6 {
  background-color: rgb(248, 122, 4);
  color: black;
}


/* Style the back side */

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}


/*@media screen and (max-width:959px){
  }

/*END FLIP*/

.projects {
  background-color: blueviolet;
  width: 100%;
  height: 680px;
  display: block;
}

.row {
  justify-content: space-between;
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="projects">
  <h1 id="project" class="pro">Projects</h1>
  <div class="flex-container">

    <div class="container-fluid p-0 d-flex  justify-content-center d-inline align-content-center">
      <div class="row ">
        <div class="col-6 col-sm-2">

          <div class="one" style="width: 285px; height: 275px;">
            <div class="flip-card">
              <div class="flip-card-inner">
                <div class="flip-card-front">
                  <img class="light" src="light.png">
                </div>
                <div class="flip-card-back">
                  <h1>John Doe</h1>
                  <p>Architect & Engineer</p>
                  <p>We love that guy</p>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="two" style="width: 299px; height: 275px;">
          <div class="flip-card">
            <div class="flip-card-inner">
              <div class="flip-card-front t2">
                <img class="light" src="light.png">
              </div>
              <div class="flip-card-back">
                <h1>John Doe</h1>
                <p>Architect & Engineer</p>
                <p>We love that guy</p>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="three " style="width:285px; height:275px;  ">
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front t3">
              <img class="light" src="light.png">
            </div>
            <div class="flip-card-back">
              <h1>John Doe</h1>
              <p>Architect &amp; Engineer</p>
              <p>We love that guy</p>
            </div>

          </div>
        </div>
      </div>
    </div>




    <div class="container-fluid p-0 d-flex align-content-center justify-content-center d-inline  ">

      <div class="row ">

        <div class="col-6 col-sm-2">



          <div class="four" style="width: 285px; height:275px;">
            <div class="flip-card">
              <div class="flip-card-inner">
                <div class="flip-card-front t4">
                  <img class="light" src="light.png">
                </div>
                <div class="flip-card-back">
                  <h1>John Doe</h1>
                  <p>Architect & Engineer</p>
                  <p>We love that guy</p>
                </div>

              </div>
            </div>
          </div>
        </div>





        <div class="five" style="width: 299px; height:275px;">
          <div class="flip-card">
            <div class="flip-card-inner">
              <div class="flip-card-front t5">
                <img class="light" src="light.png">
              </div>
              <div class="flip-card-back">
                <h1>John Doe</h1>
                <p>Architect & Engineer</p>
                <p>We love that guy</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="six" style="width: 285px; height:275px;">
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front t6 ">
              <img class="light" src="light.png">
            </div>
            <div class="flip-card-back">
              <h1>John Doe</h1>
              <p>Architect &amp; Engineer</p>
              <p>We love that guy</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

如何获得相等的间距？

1 个答案: