Question

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

<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

有几种方法可以做到这一点。最简单的是花车。将Background应用于左侧所需的图像，将float: left应用于您想要的图像。

请注意，您需要将float: right应用于下一个元素（clear: both div或其col），以防止它超出页面中浮动的元素流。

此外，您的段落文本应包含在ul元素中，以确保其p为display并防止浮动元素上升到其上方的文本中。

文档：

DEMO ：http://jsbin.com/pozete/edit?html,css,output

<强> CSS ：

block

<强> HTML ：

.logo-left {
  float: left;
}
.logo-right {
  float: right;
}
.legallinks {
  clear: both;
}

Answer 2

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

希望有所帮助

编辑：我重申你必须添加＆＃34;清除：两者;＆＃34;到您的ul class＆＃34; .list-inline＆＃34;。没有它，当屏幕很小时，你的链接将在图像之间。

Answer 3

将float属性添加到#logo_left和#logo_right ID。

#logo_left {
  float:left;
 }

#logo_right {
  float:right; 
}

并在图片标记上方添加以下代码（在范围文本之后）

<br style="clear:both"/>

http://jsbin.com/pesegebubo/edit

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

3 个答案: