如何在容器中将 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

刚刚添加显示：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>

如何在容器中将 DIV 个框并排对齐？

How to align DIV boxes next to each other in a container?

html

css

mobile-website