html - 使用 CSS/HTML 正确定位 2 个并排图像的方法？

Question

所以我想找出一种简单的方法来重新组织我网站特定页面上的并排图像。这是一个链接:http://www.thegrassrootsgarage.com/album-tile-recommendations-discography-overviews/

我知道将图像向左浮动可以使它们并排显示，但就目前情况而言，它们不均匀并且没有按照我希望的方式响应。有什么方法可以使这些图像彼此对齐？

并添加另一个问题来引导 - 我如何才能将它们置于页面本身的中心？

这是我目前的 html:

<h><a href="http://www.thegrassrootsgarage.com/uncategorized/albumtile1/"><font size="5"><b>David Bowie</h></a></b></font>

<a href="http://www.thegrassrootsgarage.com/uncategorized/albumtile1/"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-300x300.jpg" alt="David Bowie Album Tile" width="300" height="300" class="alignnone size-medium wp-image-102" style="float:left;" /></a></img>

<h><a href="http://www.thegrassrootsgarage.com/uncategorized/brian-eno-album-tile-recommendations/"><font size="5"><b>Brian Eno</h></a></b>

<a href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1.jpg"><img class="hasBorder" src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-300x300.jpg" alt="" width="300" height="300" class="alignnone size-medium wp-image-488" style="float:left;" /></a></img>

希望有一个快速简单的解决方案 - 不幸的是，我还没有找到它。祝你有美好的一天!

Answer 1

您应该创建一个包含标题和图像的 div 并将 float: left 应用于它(记住将它从 img)

代码应该是:

<div style="float: left;">
    <p>
        <h>
            <a href="http://www.thegrassrootsgarage.com/uncategorized/albumtile1/">
                <font size="5">
                    <b>David Bowie</b>
                </font>
            </a>
        </h>
    </p>
    <p>
        <a href="http://www.thegrassrootsgarage.com/uncategorized/albumtile1/">
            <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-300x300.jpg" alt="David Bowie Album Tile" width="300" height="300" class="alignnone size-medium wp-image-102" srcset="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-300x300.jpg 300w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-150x150.jpg 150w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-768x768.jpg 768w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-1024x1024.jpg 1024w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile-956x956.jpg 956w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/01/David-Bowie-Album-Tile.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px">
        </a>
    </p>
</div>
<div style="float: left;">
    <p>
        <h>
            <a href="http://www.thegrassrootsgarage.com/uncategorized/brian-eno-album-tile-recommendations/">
                <font size="5">
                    <b>Brian Eno</b>
                </font>
            </a>
        </h>
    </p>
    <p>
        <a href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1.jpg">
            <img class="hasBorder" src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-300x300.jpg" alt="" width="300" height="300" srcset="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-300x300.jpg 300w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-150x150.jpg 150w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-768x768.jpg 768w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-1024x1024.jpg 1024w, http://www.thegrassrootsgarage.com/wp-content/uploads/2016/10/Brian-Eno-Album-Tile-Cropped-1-956x956.jpg 956w" sizes="(max-width: 300px) 100vw, 300px">
        </a>
    </p>
</div>

额外提示:考虑使用类而不是内联样式。