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

Question

我想将客户网站的div框完美地对齐在一起，并且没有一些比其他框大。这是与代码相关的页面：https://www.imaniskinclinic.com/treatments

这些盒子不是内联的，有些显然比其他的更大。我添加了一个div 盒子容器，我认为它会更好地容纳盒子，但它似乎不起作用。

谁能给我一些帮助和指导我必须做什么？

这是代码：CSS然后HTML

.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;
}

		
<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>

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>