页脚与图像保留所有文字右侧的图像

我有一个页脚，其中包含一个图像在左侧，并在其右侧的项目列表。页脚与图像保留所有文字右侧的图像

我想要让这个当屏幕变得缩小，使文本的非图像下显示为显示它上面的列表中包裹的物品。

目前，如果屏幕太窄，文字会在图像下包裹，这不是我想要的。

谁能告诉我如何做到这一点？我确实考虑过使用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>

来源

2016-06-20 Jeeves

一种方法是设置页脚表的显示和孩子们表单元格：

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

来源

2016-06-20 03:31:07 j08691

Downvoter care to comment？ – j08691

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>

来源

2016-06-20 03:30:26

我无法使用flexbox。需要它在较旧的Android设备上工作。 – Jeeves

查看我编辑的代码 –

您可以交换项目的位置并将链接浮动到右侧，并且处理顶部空间使其与徽标高度的大小成反比。

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

来源

2016-06-20 03:51:31 zola

在图像上使用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>

来源

2016-06-20 04:58:52 LGSon

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

左边距

来源

2016-06-20 09:10:06

页脚与图像保留所有文字右侧的图像

回答

相关问题