如何使html卡对齐行和列？

Question

我在此链接中找到了我想用于网站的卡片设计：https://codepen.io/virgilpana/pen/RNYQwB

当我将html，css和js添加到我的网站时，这些卡中的多个需要在行和列中彼此对齐，这些卡片似乎彼此叠加。如何编辑代码以使它们在行和列中对齐？

以下是该卡的相关代码：

showDialog

public void showDialog(String msg, Context context) {
    pDialog = new ProgressDialog(context);
    pDialog.setMessage(msg);
    pDialog.show();
}

Answer 1

  

这些卡中的多个需要在行中彼此对齐   和列

我打算写一个 CSS Grid 的示例，但是如果您在简单的行和列中对齐未知数量的卡片， CSS Flexbox 就是这种布局的完美工具。

工作示例：

body {
background-color: rgb(63, 63, 255);
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: 496px;
margin: 0 auto;
padding: 9px;
background-color: rgb(95, 95, 255);
}

.card {
width: 100px;
height: 140px;
margin: 12px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 12px rgb(63, 63, 63);
}

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

Answer 2

我已将您的卡片包装成包装.card-wrapper

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

并从该ID #make-3D-space

中禁用这些样式

/*     position:absolute;    
    top:80px;
    left:50%;    
/*     margin-left:-167px; */

$(document).ready(function() {

  // Lift card and show stats on Mouseover
  $('.product-card').hover(function() {
    $(this).addClass('animate');
    $('div.carouselNext, div.carouselPrev').addClass('visible');
  }, function() {
    $(this).removeClass('animate');
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
  });

  // Flip card to the back side
  $('.view_details').click(function() {
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
    $('.product-card').addClass('flip-10');
    setTimeout(function() {
      $('.product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo(80, 1, function() {
        $('.product-front, .product-front div.shadow').hide();
      });
    }, 50);

    setTimeout(function() {
      $('.product-card').removeClass('flip90').addClass('flip190');
      $('.product-back').show().find('div.shadow').show().fadeTo(90, 0);
      setTimeout(function() {
        $('.product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
        setTimeout(function() {
          $('.product-card').css('transition', '100ms ease-out');
          $('.cx, .cy').addClass('s1');
          setTimeout(function() {
            $('.cx, .cy').addClass('s2');
          }, 100);
          setTimeout(function() {
            $('.cx, .cy').addClass('s3');
          }, 200);
          $('div.carouselNext, div.carouselPrev').addClass('visible');
        }, 100);
      }, 100);
    }, 150);
  });

  // Flip card back to the front side
  $('.flip-back').click(function() {

    $('.product-card').removeClass('flip180').addClass('flip190');
    setTimeout(function() {
      $('.product-card').removeClass('flip190').addClass('flip90');

      $('.product-back div.shadow').css('opacity', 0).fadeTo(100, 1, function() {
        $('.product-back, .product-back div.shadow').hide();
        $('.product-front, .product-front div.shadow').show();
      });
    }, 50);

    setTimeout(function() {
      $('.product-card').removeClass('flip90').addClass('flip-10');
      $('.product-front div.shadow').show().fadeTo(100, 0);
      setTimeout(function() {
        $('.product-front div.shadow').hide();
        $('.product-card').removeClass('flip-10').css('transition', '100ms ease-out');
        $('.cx, .cy').removeClass('s1 s2 s3');
      }, 100);
    }, 150);

  });


  /* ----  Image Gallery Carousel   ---- */

  var carousel = $('.carousel ul');
  var carouselSlideWidth = 335;
  var carouselWidth = 0;
  var isAnimating = false;

  // building the width of the casousel
  $('.carousel li').each(function() {
    carouselWidth += carouselSlideWidth;
  });
  $(carousel).css('width', carouselWidth);

  // Load Next Image
  $('div.carouselNext').on('click', function() {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft + carouselSlideWidth;
    if (newLeft == carouselWidth || isAnimating === true) {
      return;
    }
    $('.carousel ul').css({
      'left': "-" + newLeft + "px",
      "transition": "300ms ease-out"
    });
    isAnimating = true;
    setTimeout(function() {
      isAnimating = false;
    }, 300);
  });

  // Load Previous Image
  $('div.carouselPrev').on('click', function() {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft - carouselSlideWidth;
    if (newLeft < 0 || isAnimating === true) {
      return;
    }
    $('.carousel ul').css({
      'left': "-" + newLeft + "px",
      "transition": "300ms ease-out"
    });
    isAnimating = true;
    setTimeout(function() {
      isAnimating = false;
    }, 300);
  });
});

/* Generals resets and unimportant stuff */

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #eaebec;
  font-family: "Open Sans", sans-serif;
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

#view-code {
  color: #48cfad;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  position: absolute;
  top: 640px;
  left: 50%;
  margin-left: -35px;
}

#view-code:hover {
  color: #34c29e;
}


/* --- Product Card ---- */

#make-3D-space {
  position: relative;
  perspective: 800px;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transition: transform 5s;
  /*     position:absolute;    
    top:80px;
    left:50%;	 
/*     margin-left:-167px; */
}

.product-front,
.product-back {
  width: 335px;
  height: 500px;
  background: #fff;
  position: absolute;
  left: -5px;
  top: -5px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.product-back {
  display: none;
  transform: rotateY( 180deg);
}

.product-card.animate .product-back,
.product-card.animate .product-front {
  top: 0px;
  left: 0px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.product-card {
  width: 325px;
  height: 490px;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}

div.product-card.flip-10 {
  -webkit-transform: rotateY( -10deg);
  -moz-transform: rotateY( -10deg);
  -o-transform: rotateY( -10deg);
  transform: rotateY( -10deg);
  transition: 50ms ease-out;
}

div.product-card.flip90 {
  -webkit-transform: rotateY( 90deg);
  -moz-transform: rotateY( 90deg);
  -o-transform: rotateY( 90deg);
  transform: rotateY( 90deg);
  transition: 100ms ease-in;
}

div.product-card.flip190 {
  -webkit-transform: rotateY( 190deg);
  -moz-transform: rotateY( 190deg);
  -o-transform: rotateY( 190deg);
  transform: rotateY( 190deg);
  transition: 100ms ease-out;
}

div.product-card.flip180 {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  transition: 150ms ease-out;
}

.product-card.animate {
  top: 5px;
  left: 5px;
  width: 335px;
  height: 500px;
  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}

.stats-container {
  background: #fff;
  position: absolute;
  top: 386px;
  left: 0;
  width: 265px;
  height: 300px;
  padding: 27px 35px 35px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.product-card.animate .stats-container {
  top: 272px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.stats-container .product_name {
  font-size: 22px;
  color: #393c45;
}

.stats-container p {
  font-size: 16px;
  color: #b1b1b3;
  padding: 2px 0 20px 0;
}

.stats-container .product_price {
  float: right;
  color: #48cfad;
  font-size: 22px;
  font-weight: 600;
}

.image_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #48daa1;
  opacity: 0;
}

.product-card.animate .image_overlay {
  opacity: 0.7;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.product-options {
  padding: 2px 0 0;
}

.product-options strong {
  font-weight: 700;
  color: #393c45;
  font-size: 14px;
}

.product-options span {
  color: #969699;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

.view_details {
  position: absolute;
  top: 112px;
  left: 50%;
  margin-left: -85px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 19px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  width: 172px;
  opacity: 0;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.view_details:hover {
  background: #fff;
  color: #48cfad;
  cursor: pointer;
}

.product-card.animate .view_details {
  opacity: 1;
  width: 152px;
  font-size: 15px;
  margin-left: -75px;
  top: 115px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

div.colors div {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  float: left;
}

div.colors div span {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 50%;
}

div.colors div span:hover {
  width: 17px;
  height: 17px;
  margin: -1px 0 0 -1px;
}

div.c-blue span {
  background: #6e8cd5;
}

div.c-red span {
  background: #f56060;
}

div.c-green span {
  background: #44c28d;
}

div.c-white span {
  background: #fff;
  width: 14px;
  height: 14px;
  border: 1px solid #e8e9eb;
}

div.shadow {
  width: 335px;
  height: 520px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}

.product-back div.shadow {
  z-index: 10;
  opacity: 1;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
}

.flip-back {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.cx,
.cy {
  background: #d2d5dc;
  position: absolute;
  width: 0px;
  top: 15px;
  right: 15px;
  height: 3px;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.flip-back:hover .cx,
.flip-back:hover .cy {
  background: #979ca7;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.cx.s1,
.cy.s1 {
  right: 0;
  width: 30px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cy.s2 {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cy.s3 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s1 {
  right: 0;
  width: 30px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s2 {
  -ms-transform: rotate(140deg);
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s3 {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all 100ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.carousel {
  width: 335px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.carousel ul {
  position: absolute;
  top: 0;
  left: 0;
}

.carousel li {
  width: 335px;
  height: 500px;
  float: left;
  overflow: hidden;
}

.arrows-perspective {
  width: 335px;
  height: 55px;
  position: absolute;
  top: 218px;
  transform-style: preserve-3d;
  transition: transform 5s;
  perspective: 335px;
}

.carouselPrev,
.carouselNext {
  width: 50px;
  height: 55px;
  background: #ccc;
  position: absolute;
  top: 0;
  transition: all 200ms ease-out;
  opacity: 0.9;
  cursor: pointer;
}

.carouselNext {
  top: 0;
  right: -26px;
  -webkit-transform: rotateY( -117deg);
  -moz-transform: rotateY( -117deg);
  -o-transform: rotateY( -117deg);
  transform: rotateY( -117deg);
  transition: all 200ms ease-out;
}

.carouselNext.visible {
  right: 0;
  opacity: 0.8;
  background: #efefef;
  -webkit-transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -o-transform: rotateY( 0deg);
  transform: rotateY( 0deg);
  transition: all 200ms ease-out;
}

.carouselPrev {
  left: -26px;
  top: 0;
  -webkit-transform: rotateY( 117deg);
  -moz-transform: rotateY( 117deg);
  -o-transform: rotateY( 117deg);
  transform: rotateY( 117deg);
  transition: all 200ms ease-out;
}

.carouselPrev.visible {
  left: 0;
  opacity: 0.8;
  background: #eee;
  -webkit-transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -o-transform: rotateY( 0deg);
  transform: rotateY( 0deg);
  transition: all 200ms ease-out;
}

.carousel .x,
.carousel .y {
  height: 2px;
  width: 15px;
  background: #48cfad;
  position: absolute;
  top: 31px;
  left: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.carousel .x {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 21px;
}

.carousel .carouselNext .x {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.carousel .carouselNext .y {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<div class="card-wrapper">
  
  <div id="make-3D-space">
    <div class="product-card">
        <div class="product-front">
        	<div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div class="view_details">View details</div>
            <div class="stats">        	
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            
                    
                    <div class="product-options">
                    <strong>SIZES</strong>
                    <span>XS, S, M, L, XL, XXL</span>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div class="product-back">
	        <div class="shadow"></div>
            <div class="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                </div>
            </div>
            <div class="flip-back">
            	<div class="cy"></div>
                <div class="cx"></div>
            </div>
        </div>	  
    </div>	
</div>	
  
  <div id="make-3D-space">
    <div class="product-card">
        <div class="product-front">
        	<div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div class="view_details">View details</div>
            <div class="stats">        	
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            
                    
                    <div class="product-options">
                    <strong>SIZES</strong>
                    <span>XS, S, M, L, XL, XXL</span>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div class="product-back">
	        <div class="shadow"></div>
            <div class="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                </div>
            </div>
            <div class="flip-back">
            	<div class="cy"></div>
                <div class="cx"></div>
            </div>
        </div>	  
    </div>	
</div>	
  
  <div id="make-3D-space">
    <div class="product-card">
        <div class="product-front">
        	<div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div class="view_details">View details</div>
            <div class="stats">        	
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            
                    
                    <div class="product-options">
                    <strong>SIZES</strong>
                    <span>XS, S, M, L, XL, XXL</span>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div class="product-back">
	        <div class="shadow"></div>
            <div class="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                </div>
            </div>
            <div class="flip-back">
            	<div class="cy"></div>
                <div class="cx"></div>
            </div>
        </div>	  
    </div>	
</div>	
  
  
</div>



	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>