Question

我是html和css编码的新手，最近我使用wordpress创建了自己的网站。

在wordpress的一个页面中，我想用一个小空间分隔彼此相邻的图像;我成功的事情，但遗憾的是图像没有水平对齐。第二和第三图像位于第一图像的更下方。

我使用的html编码没有对css进行任何更改，如下所示：

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1-150x150.jpg" alt="Image_1" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2-150x150.jpg" alt="Image_2" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3-150x150.jpg" alt="Image_3" width="150" height="150" hspace="10/" />
</a>

非常感谢任何帮助。

非常感谢杰米斯

Answer 1

您需要编写一些CSS来完成工作。 Here详细信息如何操作。

Answer 2

您是否检查过是否还有其他CSS规则影响您的网页元素？另外，作为旁注，在第三个图像的hspace属性中有一个额外的斜杠（/）

此外，此示例将帮助您http://jsfiddle.net/0fe0w32s/？

HTML

<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>

CSS

.my_image {
    display: block;
    float: left;
    margin-right: 10px;
}

.my_image img {
    width: 150px;
    height: 150px;
}

编辑2 ，请删除包含段落中的 BR 标记，以便最终代码看起来像这样

<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
    </a>
</p>

Answer 3

@ Punctweb

由于某种原因，以下代码使用Punctweb。我刚刚将图像添加到了彼此旁边。虽然我觉得这段代码看起来不太正确

＆＃13;

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />

＆＃13;

使用HTML将图像彼此相邻添加时删除垂直空间

3 个答案: