画像付きのフッター画像の右側にすべてのテキストを保持

Question

私は左の画像とその右側のリストを含むフッターを持っています。

私は、画面がテキストの非は画像の下に表示されるように、リストラップ内の項目上記のように、それを表示するために絞り込むことを得るときようにそれを作りたいです。

現在、画面が狭すぎると、テキストが私の望んでいないイメージの下にラップします。

誰もがこれを行う方法で私に助言することはできますか？私はflexboxの使用を検討しましたが、これはオプションではないので古いブラウザで動作する必要があります。

#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

一つの方法は、テーブルセルにテーブルにフッターや子どもの表示を設定することです：

#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

あなたはアイテムの場所を交換してリンクを右に浮かべることができ、上部スペースに対処するにはロゴの高さのサイズに負のマージンを与えます。画像上の

.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

使用float: left、それをテキスト

.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>

上の左余白のような非常に同じ幅の幅と使用を与えます