Question

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

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

但是，他们没有分为左派和右派。每当我尝试向右浮动或文本对齐，或使用div和spans的其他组合时，它最终会破坏内联属性，图像和文本不再共线。我已经能够使用单独的div和span将左侧和右侧的文本分开，但只有当它们不共线时，这有点无聊。

这是我的HTMl＆amp; CSS：

＆＃13;

/* 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;	
}

＆＃13;

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

＆＃13;

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

Answer 1

添加到您的HTML：

<div class="float-right>课程，其中包含您的文字＆amp; img出现在右边

到你的CSS： float:right

footer img

和

.float-right {float:right;}

请注意，在移动设备上查看时可能会出现快速响应问题，但它可以快速修复桌面尺寸。

不要忘记clear之后的浮动元素。

Answer 2

我解决了一些问题。这是另一种可能的解决方案，但是右侧溢出并且不会保持在页脚的右侧。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

页脚问题：文本左，文本右，图像右，内联和共线无效

2 个答案: