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

一种方法是将页脚的显示设置为table，将子项设置为table-cell：

#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，给它一个宽度并使用与文本左边距相同的宽度

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

#footer{
	width:100%;
}
.footer__logo{
	float:left;
	width:40%;
}
.footer__items{
	float:left;
	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>

带图像的页脚将所有文本保留在图像右侧

5 个答案: