页脚问题：左侧文本、右侧文本、右侧图像，内联和共线的所有内容均无效

Question

我一直在尝试为我的网站创建一个新的页脚，如下所示： footer_nice

不幸的是，我只能在 gimp 中重新创建它，而不是 html & css。到目前为止，我只取得了部分成功。我已经能够对齐所有文本和图像，因此它们都是共线和内联的，如下所示： footer_bad

但是，它们并没有被分成左右。每当我尝试向左浮动或文本向右对齐，或使用 div 和 span 的其他组合时，它最终会破坏内联属性并且图像和文本不再共线。我已经能够使用单独的 div 和 span 将文本分成左右两部分，但前提是它们不共线，这有点令人失望。

这是我的 HTMl & CSS:

/* footer */
.middle > * {
  vertical-align: middle;
}

footer {
 color: #666;    
   font-size: 1.4em;
 background: #191919;
 border-top: 1px solid #444;
 padding: 20px;   
 white-space: nowrap;
}

footer a {
 color: #888;    
 display:inline-block;

}   
footer a:hover {color: #BBB;}
footer img {
 padding: 0px 0px 0px 4px; 
}

<footer> 
 &copy; <script>document.write(new Date().getFullYear());</script><a href="index.html">&nbsp;WEBSITE</a>
 BUILT WITH <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">HTML</a>. OPTIMIZED.<span class="middle"><a href="url"><img src="https://placebear.com/32/25"/></a></span>
</footer>

有什么我想念的吗？我只是忘记了一些简单的 css 吗？任何输入都会很棒。我希望这不会成为一个愚蠢的问题。我在这里和 w3schools 上四处看了看，无法得出结论。谢谢大家！

Answer 1

添加到您的HTML：

<div class="float-right> class 右侧包含您的文字和图片

致您的CSS： float:right 到你的 footer img

和

.float-right {float:right;}

请注意，在移动设备上查看时可能会出现响应问题，但这是桌面大小的快速修复。

不要忘记clear你的浮动元素。

Answer 2

我解决了更多问题。这是另一个可能的解决方案，但右侧会溢出并且不会限制在页脚的右侧。

.middle > * {
  vertical-align: middle;
}

body {
  padding: 20px;
  background: #eee;
}

div {
  display: inline-block;
  margin: 0;
  width:100%;
  text-align: right;
}

footer {
  margin: 0;
  padding: 10px;
  background: white;
  white-space: nowrap;
}
footer a{
  display: inline-block;
  
}

 <footer> 
      &copy; <script>document.write(new Date().getFullYear());</script><a href="index.html">&nbsp;WEBSITE</a>
   <div class="float-right">BUILT WITH <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">HTML</a>. OPTIMIZED <span class="middle"><a href="https://developers.google.com/"><img src="https://placebear.com/32/25"/></a></span>
   </div>
  <div class="clearer"></div>
  </footer>

我无法解决这个特定解决方案的溢出问题，但在我处理它时，我想到了使用 BrainHappy 提供的解决方案解决共线问题的方法。如果我在页脚左侧添加一个与页脚右侧图像高度相同的虚拟图像，这将解决文本和图像的共线对齐问题。这个虚拟图像当然会与背景颜色相同。根据位置，您可以调整填充以补偿此虚拟照片的存在。例子： derp_fix

此解决方案有效，但远非优雅。我觉得虚拟图像是不好的做法，所以我可能会完全放弃页脚中的图像。如果其他人有任何其他建议，我会洗耳恭听。谢谢！

页脚问题：左侧文本、右侧文本、右侧图像，内联和共线的所有内容均无效

Footer issue: Text left, text right, image right, everything inline and collinear not working

html

css

footer