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

问题描述：

我在引导html页面的页脚内有一个合理的文本块。现在，我想添加两个图像高度相同但宽度不同的文本下面，并在任何一边对齐。在div的左下角和右下角对齐两个图像

<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

非常感谢您的帮助

答

将float财产添加到#logo_left和#logo_right ID's。

#logo_left { 
    float:left; 
} 

#logo_right { 
    float:right; 
}

，并且还添加以下所述图像标签上面的代码（后跨度文本）

<br style="clear:both"/>

http://jsbin.com/pesegebubo/edit

感谢。它做到了。 – zantafio

答

有几个方法可以做到这个。这最简单的是由花车。将float: left应用于所需的左侧图像，然后将float: right应用于右侧的图像。

请注意，您需要将clear: both应用于下一个元素（col div或其ul），以防止其上升到页面流中浮动元素的上方。

此外，您的段落文本应该被包裹在一个p元素，以确保其display是block并防止浮动元素上升到它们上面的文字。

文档：

MDN: The float CSS property
MDN: Clearing floats
MDN: Block formatting context

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

CSS：

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

HTML：

<div class="disclaimer"> 
    <p>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.</p> 
    <p>Nû von wizzen nû, trôstes leide vernomen er an vil unde iuch der ie und nû. Einen der maeres was sîn ze ist welle dâ dô trôstes maeres sô er der ze, der diz noch. Der, welle vâlant tohter ane ie diz dar maere anders daz manz was und diz giht daz? Dâ tûsenden sîne er zuoversiht dar unde eine ze leide erkande. Was des sîne ritter ir waere der iuch von daz, diz swer lantmaere liute ane vride swuor. Der, kâmen niht, ir iuch belanget wunneclîche ritter maere zuoversiht. Lant daz bî selbe sîn niht daz.</p> 
    <img class="logo-left" src="http://s1.postimg.org/j4mav1ikb/logo_left.jpg"> 
    <img class="logo-right" src="http://s1.postimg.org/bda6a83sr/logo_right.jpg"> 
</div> 
<ul class="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>

答

什么janaspage说是正确的。你应该围绕p而不是跨度文本。然后看看img类。它的img-responsive和img-left。我不知道为什么有img-left课。相反，你可以使用称为左拉（和拉右）的引导类。所以：

使用p标签，而不是跨
变化IMG向左拉左和变化IMG-右右拉

希望它可以帮助

编辑：我放弃你必须添加“明确：两者;”到你的ul类“.list-inline”。没有这一点，当屏幕很小时，你的链接将在图像之间。

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

相关推荐