样式化主页图像布局 - 目标 div 或 img？答案

【问题标题】：Styling a home page image layout - target div or img?样式化主页图像布局 - 目标 div 或 img？
【发布时间】：2016-03-04 00:42:43
【问题描述】：

我只使用图像内容来设计主页，没有文字。

当我设置图像布局的样式时，应该只在 div 类中完成（例如，天花板> 还是我需要为每个 img 类设置样式（.ceiling > a > img）

我要深入了解这里的样式，因为它可以设置在顶级 div 中。

http://jsfiddle.net/515r0zw4/

<div class="category4block">
<div class="ceiling"><a href="http://example.com/ceiling"><img  src="http://example.com/image/data/Home Page /Ceiling.jpg" /></a></div>
<div class="wall"><a href="http://example.com/wall"><img  src="http://example.com/image/data/Home Page /Wall.jpg" /></a></div>
<div class="island"><a href="http://example.com/island"><img  src="http://example.com/image/data/Home Page /Island.jpg" /></a></div>
<div class="downwall"><a href="http://example.com/downwall"><img   src="http://example.com/image/data/Home Page /Downwall.jpg" /></a></div>
</div>

.category4block {
width: 100%;
margin-left: -10px;
clear:both;
}

.ceiling {
float: left;
width: 23%;
margin-left: 5px;
margin-bottom: 20px;
}

.ceiling > a > img {
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.wall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.wall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.island {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.island > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.downwall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.downwall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
 }

【问题讨论】：

欢迎来到 Stack Overflow！这个问题要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
不清楚你在问什么。提供有关您的问题的更详细信息。
就像@Paulie_D 所说，这真的是见仁见智。就我个人而言，我只会定位：.ceiling img{}，除非您遇到图像会出现在该容器中的锚点之外的情况。

标签： html css

【解决方案1】：

您可以只设置“包装器”的样式，即：.ceiling、.wall、.island、.downwall

.ceiling{float: left; width: 23%; margin-left: 5px; margin-bottom: 20px;}

.wall, .island, .downwall{float: left; width: 23%; margin-left: 22px; margin-bottom: 20px;}

然后你可以给图像一个特定的类，它将具有样式，例如：图像

<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />

.image{border-style: solid; border-width: 10px; max-height: 240px; width: 100%;}

【讨论】：