html - 在页脚中使用 float 元素

Question

我的网站现在位于本地服务器上，但是对于那些知道它叫什么的人来说，这将是一个简单的修复。

我试图让这些列表(白色边框) float 在页脚可用空间的最左边(黑色边框)。

这是我的CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }

#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }


.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/  }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}

h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}

.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }

.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }

.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}

我有包含页脚，在 900px x 503px 容器内，我希望所有列表都向左浮动(如果足够小，则在彼此下方 float )。所以“文件”将在“关注我们”下流动，如果我要在“推荐”下放置一个搜索栏，它会适合。

我可以用我的 CSS 做些什么来实现这一点？

Answer 1

为什么不为每一侧(左、中、右)创建一个列并以这种方式模拟它，至少我认为这是你想要实现的目标

fiddle http://jsfiddle.net/eEwdk/

还有另一种解决方法，包括使每个 li 元素绝对定位并计算它的位置(是的，我知道这听起来多余)