css - 在div的左下角和右下角对齐两个图像

Question

我在 bootstrap html 页面的页脚中有一个合理的文本 block 。 现在，我想在文本下方添加两个高度相同但宽度不同的图像，并与任一侧对齐。

<footer>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <span class="copyright">Copyright &copy; Bla Bla 2015</span>
        </div>
        <div class="col-md-6">
            <div class="disclaimer">
            <span>Der ritter überladen ie des den der kâmen und. Daz ane waz ie der waz Tristan, lant ende, wol daz, schaden nieman lant benaeme sîne ze der wîp, schaden liute ie. Und diz von, trôstes wârheit haete nieman unde. Iuch meistiu alsô lande ze belanget, vol niht verluren, meistiu er schedelîchen swer ritter ze ie niht ende swer</span>
                <img id="logo_left" src="http://s1.postimg.org/j4mav1ikb/logo_left.jpg" class="img-responsive img-left" alt="">
                <img id="logo_right" src="http://s1.postimg.org/bda6a83sr/logo_right.jpg" class="img-responsive img-right" alt="">
            </div>
        </div>
        <div class="col-md-3">
            <ul class="list-inline legallinks">
                <li>
                    <a href="#modal_legal1" class="legal-link" data-toggle="modal">Legal1</a>
                </li>
                <li>
                    <a href="#modal_legal2" class="legal-link" data-toggle="modal">Legal2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我无法让它正常工作

这是 jsfiddle: jsfiddle

非常感谢任何帮助

Answer 1

janaspage说的对。您应该将文本环绕在 p 而不是 span 周围。然后看看 img 类。它的 img-responsive 和 img-left。我不知道为什么会有 img-left 类。您可以使用名为 pull-left(和 pull-right)的 Bootstrap 类代替。所以:

• 使用 p 标签代替 span
• 将 img-left 更改为 pull-left，并将 img-right 更改为 pull-right

希望对你有帮助

编辑:我意识到你必须添加“clear: both;”到你的 ul 类“.list-inline”。如果没有它，当屏幕很小时，您的链接将位于图像之间。