css 页脚3-div浮动

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 页脚3-div浮动相关的知识，希望对你有一定的参考价值。

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
// alert('Hello world!');
<body>
<div id="footer">
	<img class="left" src="http://dummyimage.com/300x200/00e1ff/ffffff&text=left" alt="">
	<img class="right" src="http://dummyimage.com/300x200/7717ed/ffffff&text=right" alt="">
	<img class="mid" src="http://dummyimage.com/300x200/ffc400/ffffff&text=middle" alt="">
</div>
</body>
/**
 * Footer 3-div floating
 */
body {
min-width: 900px;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: gray;
white-space: nowrap;
}

.left {
float: left;
clear: right;
position: fixed;
bottom: 0;
left: 0;
}

.right {
position: fixed;
bottom: 0;
right: 0;
float: right;
clear: left;
}

.mid {
display: block;
margin: 0 auto;
clear: both;
}

以上是关于css 页脚3-div浮动的主要内容，如果未能解决你的问题，请参考以下文章

css 相对定位 绝对定位 浮动 分析

页脚不浮动在底部

粘性页脚浮动到一页顶部

如何在浮动组件下方设置页脚？

菜单和内容 div 向左浮动并带有粘性页脚 -> 高度 100%

在购物车页脚中重新加载 PHP If/Else 语句而不重新加载整个页面？ ( XT 浮动车)