在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

非常感謝您的幫助

來源

2015-06-14 zantafio

將float財產添加到#logo_left和#logo_right ID's。

#logo_left { 
    float:left; 
} 

#logo_right { 
    float:right; 
}

，並且還添加以下所述圖像標籤上面的代碼（後跨度文本）

<br style="clear:both"/>

http://jsbin.com/pesegebubo/edit

來源

2015-06-14 18:19:08 Prime

感謝。它做到了。 – zantafio

有幾個方法可以做到這個。這最簡單的是由花車。將float: left應用於所需的左側圖像，然後將float: right應用於右側的圖像。

請注意，您需要將clear: both應用於下一個元素（col div或其ul），以防止其上升到頁面流中浮動元素的上方。

此外，您的段落文本應該被包裹在一個p元素，以確保其display是block並防止浮動元素上升到它們上面的文字。

文檔：

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>

來源

2015-06-14 17:24:44 jtheletter

什麼janaspage說是正確的。你應該圍繞p而不是跨度文本。然後看看img類。它的img-responsive和img-left。我不知道爲什麼有img-left課。相反，你可以使用稱爲左拉（和拉右）的引導類。所以：

使用p標籤，而不是跨
變化IMG向左拉左和變化IMG-右右拉

希望它可以幫助

編輯：我放棄你必須添加「明確：兩者;」到你的ul類「.list-inline」。沒有這一點，當屏幕很小時，你的鏈接將在圖像之間。

來源

2015-06-14 17:29:47 Smozku

在div的左下角和右下角對齊兩個圖像

回答

相關問題