Fußzeile mit Bild alle Text auf der rechten Seite des Bildes

Question

Ich habe eine Fußzeile, die ein Bild auf der linken Seite und eine Liste von Elementen auf der rechten Seite enthält.

Ich will es machen, so dass, wenn der Bildschirm es verengen wird in der Liste Packung wie oben die Elemente angezeigt werden, so dass nicht der Text unter dem Bild angezeigt wird.

Derzeit, wenn der Bildschirm zu schmal ist, wird der Text unter dem Bild umgebrochen, was nicht das ist, was ich will.

Kann jemand mir sagen, wie dies zu tun? Ich habe darüber nachgedacht, flexbox zu verwenden, aber das muss in älteren Browsern funktionieren, das ist keine Option.

#footer { 
 
    
 
    } 
 

 
.footer__items { 
 
    display:inline-block; 
 
}

<footer id="footer"> 
 
    <img class="footer__logo" src="images/Owl.png" alt="Picture of an Owl"> 
 
     <ul class="footer__items"> 
 
      <li><a href="#">Terms and Conditions</a></li> 
 
      <li>©Copyright Owl New Zealand Limited 2015. All rights reserved.</li> 
 
     </ul> 
 
</footer>

Answer 1

Eine Möglichkeit ist die Anzeige der Fußzeile Tabelle und die Kinder zu Tisch-Zelle zu setzen:

#footer { 
 
    display: table-row; 
 
} 
 
.footer__items, 
 
.footer__logo { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
}

<footer id="footer"> 
 
    <img class="footer__logo" src="images/Owl.png" alt="Picture of an Owl"> 
 
    <ul class="footer__items"> 
 
    <li><a href="#">Terms and Conditions</a> 
 
    </li> 
 
    <li>©Copyright Owl New Zealand Limited 2015. All rights reserved.</li> 
 
    </ul> 
 
</footer>

Answer 2

HTML

#footer .leftContent ,#footer .rightContent{ 
float:left; 
    } 
#footer .leftContent 
{ 
    width:30%; 
} 
#footer .rightContent 
{ 
    width:70%; 

} 
.leftContent img 
{ 
    width:100%; 
} 
.rightContent ul 
{ 
    padding:0; 
    margin:0; 
} 

<footer id="footer"> 
<div class="leftContent"> 


    <img class="footer__logo" src="http://www.clipartbest.com/cliparts/di6/eEx/di6eEx6i9.png" alt="Picture of an Owl"> 
    </div> 
    <div class="rightContent"> 


     <ul class="footer__items"> 
      <li><a href="#">Terms and Conditions</a></li> 
      <li>©Copyright Owl New Zealand Limited 2015. All rights reserved.</li> 
     </ul> 
     </div> 
</footer> 

Answer 3

Sie könnten die Orte der Artikel austauschen und die Links richtig schweben, und um mit dem oberen Platz umzugehen, geben Sie einen negativen Rand der Größe der Logos Höhe.

.footer__items { 
    float: right; 
} 

<footer id="footer"> 
    <ul class="footer__items"> 
     <li><a href="#">Terms and conditions</a></li> 
     <li><a href="#">&copy;Copyright Owl New Zealand Limited 2015. All rights reserved.</a></li> 
    </ul> 
     <img src="images/owl.png" class="footer__logo" alt="Picture of an owl"> 
</footer> 

Answer 4

Verwenden float: left auf das Bild, geben ihm eine Breite und verwenden, die gleiche Breite wie eine am linken Rand auf den Text

.footer__logo { 
 
    float: left; 
 
    width: 70px; 
 
} 
 
.footer__items { 
 
    margin-left: 70px; 
 
}

<footer id="footer"> 
 
    <img class="footer__logo" src="images/Owl.png" alt="Picture of an Owl"> 
 
    <ul class="footer__items"> 
 
    <li><a href="#">Terms and Conditions</a> 
 
    </li> 
 
    <li>©Copyright Owl New Zealand Limited 2015. All rights reserved.</li> 
 
    </ul> 
 
</footer>

Answer 5

#footer{ 
 
\t width:100%; 
 
} 
 
.footer__logo{ 
 
\t float:left; 
 
\t width:40%; 
 
} 
 
.footer__items{ 
 
\t float:left; 
 
\t width:60%; 
 
}

<footer id="footer"> 
 
    <div class="footer__logo" > 
 
     <img src="images/Owl.png" alt="Picture of an Owl"> 
 
    </div> 
 
    
 
    <div class="footer__items"> 
 
     <ul> 
 
     <li><a href="#">Terms and Conditions</a></li> 
 
     <li>©Copyright Owl New Zealand Limited 2015. All rights reserved.</li> 
 
    </ul> 
 
</div> 
 

 
</footer>