Выравнивание двух изображений в нижнем левом и правом нижнем углу div

Question

У меня есть обоснованный блок текста в нижнем колонтитуле страницы загрузочного 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

Добавить float имущество как #logo_left, так и #logo_right ID.

#logo_left { 
    float:left; 
} 

#logo_right { 
    float:right; 
} 

, а также добавить ниже код выше тега изображения (после текста диапазона)

<br style="clear:both"/> 

http://jsbin.com/pesegebubo/edit

Answer 2

Есть несколько способов сделать это. Это проще всего поплавками. Примените float: left к изображению, которое хотите слева, и float: right к изображению, которое вы хотите с правой стороны.

Обратите внимание, что вы должны будете применить clear: both к следующему элементу (в col DIV или его ul), чтобы не допустить его роста выше размещённых элементов в потоке страницы.

Кроме того, текст вашего абзаца должен быть обернут в элемент p, чтобы гарантировать, что его display равен block, а также чтобы воспрепятствовать перемещению перемещаемых элементов в текст над ними.

Документы:

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

ДЕМОНСТРАЦИОННЫХ: 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> 

Answer 3

Что janaspage сказал правильно. Вы должны обернуть текст вокруг p не span. Затем взгляните на классы img. Его img-отзывчивый и img-левый. Я понятия не имею, почему есть класс img-left. Вместо этого вы можете использовать класс bootstrap, называемый pull-left (и pull-right). Итак:

• использование р тега вместо диапазона
• изменения IMG-влево, чтобы тянуть влево и изменения IMG-право тянуть правый

Надеется, что это помогает

EDIT: Я relised, вы должны добавить «clear: both;» к вашему классу ul. ".list-inline". Без этого ваши ссылки будут между изображениями, когда экран будет небольшим.