使用 CSS 在 HTML 页面上浮动图片答案

【问题标题】：Floating pictures on an HTML page with CSS使用 CSS 在 HTML 页面上浮动图片
【发布时间】：2015-07-18 10:38:37
【问题描述】：

对于我的班级，我需要在我的按钮旁边浮动 3 张相同大小的图片，但在我的横幅下。

我在最左边有 6 个上下移动的按钮，最顶部的其他所有内容上方都有一个横幅。

我希望这三张图片在最右边一个，在按钮旁边最左边的一个在它们之间，在第一个下方的最右边一个。我会发布图片，但没有声誉。

实现这一目标的最佳方法是什么？

【问题讨论】：

欢迎。您可以将链接添加到您的图像，有人会很快将链接替换为图像。请参阅How to Ask 以获取有关发布的一些指导，尤其是显示您迄今为止尝试过的代码。
提高了问题的可读性。

标签： html css image button banner

【解决方案1】：

这样的事情对你有用吗？我留下了一些cmets来解释一些事情。这就是我想象的你想要的。我使用了图像，但这可以是任何东西（div、h、p 等）。 http://jsfiddle.net/670fvtb8/

<header><h1>header goes here</h1></header>

<div class="col-left">
    <ul>
        <li>button</li>
        <li>button</li>
        <li>button</li>
        <li>button</li>
        <li>button</li>
        <li>button</li>
    </ul>
</div>
<div class="col-right">
    <img src="/your-image-path.jpg" class="first">
    <img src="/your-image-path.jpg" class="mid">
    <img src="/your-image-path.jpg" class="last">
</div>

【讨论】：