如何在容器中将DIV盒相邻对齐？

Question

我想对齐我的div框为客户的网站，所有完美地相邻，而不是一些比其他的更大。以下是与代码相关的页面：https://www.imaniskinclinic.com/treatments

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

对于我必须做的事情，有人能给我一些帮助和指导吗？

下面是代码: 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

刚刚添加了display: inline-block；如果你稍微调整一下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>

​