html - 如何在容器中对齐 DIV 框?
问题描述
我想为客户的网站对齐我的 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>
解决方案
刚刚添加了 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>
推荐阅读
- c# - 并发字典内存效率
- session - 登录时 Cookie 无法正常工作
- java - Java 的 Stream.collect() 可以返回 null 吗?
- sql - SQL 我的查询什么也不返回
- javascript - Traying 用 AJAX 和 PHP 替换 JSON 中的数据
- mysql - 如何编写关于数据探索的查询以显示这种形式的数据?
- javascript - 标头 javascript 中的 Cookie 错误“拒绝设置不安全的标头“Cookie””
- linux - 谁执行 TLB 击落?
- scala - Scala 中的 LoggerTest 无法识别 src/test/resources 中的 log4j2.properties
- date - 检票口 8 DateTextField(来自检票口扩展)