如何在容器中将DIV框彼此对齐？

Question

我想将我的div框对齐到一个客户的网站，并且彼此之间完全完美地对齐，并且没有一个比其他的大。这是与代码有关的页面：https://www.imaniskinclinic.com/treatments

这些框不是嵌入式的，有些明显大于其他。我添加了一个div框容器，我认为它可以更好地容纳这些框，但是似乎没有用。

有人可以给我一些有关我必须做什么的帮助和指导吗？

这里是代码：CSS然后是HTML

    #include<stdio.h>
#define R1 3
#define C1 4
#define R2 C1
#define C2 2
void main()
{
        int i,j,k,mat1[R1][C1],mat2[R2][C2],mat3[R1][C2];
        printf("Enter 1st matrix(%dX%d) :",R1,C1);
        for(i=0;i<R1;i++)
        {
                for(j=0;j<C1;j++)
                {
                        scanf("%d",&mat1[R1][C2]);
                }
        }
        printf("Enter 2nd matrix(%dX%d) :",R2,C2);
        for(i=0;i<R2;i++)
        {
                for(j=0;j<C2;j++)
                {
                        scanf("%d",&mat1[R1][C2]);
                }
        }
        for(i=0;i<R1;i++)
        {
                for(j=0;j<C2;j++)
                {
                         mat3[i][j]=0;
                        for(k=0;k<C1;k++)
                        {
                                mat3[i][j] += mat1[i][k] * mat2[k][j];
                        }
                }
        }
        printf("The resultant matrices are :");
        for(i=0;i<R1;i++)
        {
                for(j=0;j<C2;j++)
                {
                        printf("%5d",mat3[i][j]);
                }
                printf("\n");

        }
}

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;
  
}



div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
	height: 200px;
	background: #f8abbe;
}

div.gallery:hover {
    border: 1px solid #ffffff;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 10px;
    text-align: center;
	font-family : verdana, arial, helvetica, helve, sans-serif;
	color: #ffffff;
}

Answer 1

刚刚添加的显示：行内块； 如果您使用div大小玩一点，看起来会更好

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;
  
}



div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
	height: 200px;
	background: #f8abbe;
  display: inline-block;
}

div.gallery:hover {
    border: 1px solid #ffffff;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 10px;
    text-align: center;
	font-family : verdana, arial, helvetica, helve, sans-serif;
	color: #ffffff;
}

		
<div class="box">
		<div class="gallery">
  <a href="aesthetics/acne.htm" >
    <img src="images/acne.jpg" alt="Acne" width="300" height="200">
  </a>
  <div class="desc">Acne Treatments</div>
</div>

<div class="gallery">
  <a href="aesthetics/hair%20removal.htm">
    <img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
  </a>
  <div class="desc">Laser Hair Removal</div>
</div>

<div class="gallery">
  <a href="aesthetics/electrolysis.htm">
    <img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
  </a>
  <div class="desc">Electrolysis</div>
</div>

<div class="gallery">
  <a href="aesthetics/thread%20veins.htm">
    <img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
  </a>
  <div class="desc">Thread Veins</div>
</div>
		
<div class="gallery">
  <a href="aesthetics/microderm.htm" >
    <img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
  </a>
  <div class="desc">Microdermabrasion</div>
</div>

<div class="gallery">
  <a href="aesthetics/rosacea.htm" >
    <img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
  </a>
  <div class="desc">Rosacea</div>
</div>

<div class="gallery">
  <a href="aesthetics/pigmentation.htm" >
    <img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
  </a>
  <div class="desc">Pigmentation</div>
</div>

<div class="gallery">
  <a href="aesthetics/skin%20peels.htm" >
    <img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
  </a>
  <div class="desc">Skin Peels</div>
</div>

<div class="gallery">
  <a href="aesthetics/botox_lipfillers.htm" >
    <img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
  </a>
  <div class="desc">Botox & Lipfillers</div>
</div>

<div class="gallery">
  <a href="aesthetics/semiperm.htm" >
    <img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
  </a>
  <div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>

<div class="gallery">
  <a href="aesthetics/mc.html" >
    <img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
  </a>
  <div class="desc">Massage & Cupping</div>
</div>

</div>