我正在设计一个网站，目前正在尝试完成与页脚相关的部分。到目前为止我还没有遇到任何麻烦，直到我决定进行页脚布局。
准确地说:我想将页脚分成三个单独的列，如下图所示:
结果是这样的:
如您所见，页脚列不保持其宽度，只是延伸到内容。对于不同的设置，会发生其他事情，但对我来说似乎从来都不合适。
我目前的无效方法:
HTML
<html>
<!-- BEGIN HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN WRAPPER FOR FOOTER PUSHING -->
<div class="wrapper">
<!-- BEGIN .PAGE -->
<div class="page">
<!-- BEGIN .LOGO -->
<div class="logo">
<img class="logoBB" src="images/logo.png">
<br><text class="logosub">Tworzymy Dla Ciebie</text></br>
</div>
<!-- END .LOGO -->
<!-- BEGIN .MENU -->
<div class="menu">
<hr class="top_line">
<ul>
<li><a href="#">O NAS</a></li>
<li><a href="#">GALERIA PRODUKTÓW</a></li>
<li><a href="#">AKTUALNOŚCI</a></li>
<li><a href="#">ZADAJ PYTANIE</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
<hr class="bottom_line">
</div>
<!-- END .MENU -->
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/slide1.png" alt="http://wowslider.net/" title="WOOD" id="wows0_0"/></li>
<li><img src="data0/images/3025992posterpdesignwork.jpg" alt="CUBES" title="CUBES" id="wows0_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="WOOD"><span><img src="data0/tooltips/slide1.png" alt="WOOD"/>1</span></a>
<a href="#" title="CUBES"><span><img src="data0/tooltips/3025992posterpdesignwork.jpg" alt="CUBES"/>2</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">wowslider.com</a> by WOWSlider.com v8.6</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<!-- END .PAGE -->
<!-- FOOTER PUSHER -->
<div class="push"></div>
</div>
<!-- END .WRAPPER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<!-- BEGIN FOOTER CONTAINER -->
<div class="footer_container">
<!-- BEGIN .FINDUS -->
<div class="findus">
</div>
<!-- END .FINDUS -->
<!-- BEGIN .DESIGNERS -->
<div class="designers">
</div>
<!-- END .DESIGNERS -->
<!-- BEGIN .INSPIRATIONS -->
<div class="inspirations">
</div>
<!-- END .INSPIRATIONS -->
</div>
<!-- END FOOTER CONTAINER -->
</div>
<!-- END FOOTER -->
</body>
<!-- END BODY -->
CSS
/* GENERAL PAGE SETTINGS */
* {
margin: 0;
padding: 0;
}
.page {
margin: 25px auto;
width: 960px;
}
/* WRAPPER & HTML SETTINGS */
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -168px;
}
.footer, .push {
height: 168px; /* .push must be the same height as .footer */
}
/* FOOTER SETTINGS */
.footer {
clear: both;
width: 100%;
background-color: #323232;
}
.footer_container {
width: 960px;
margin: 0 auto;
background-color: red;
}
.footer .findus {
float: left;
width: 33,33333%;
}
.footer .designers {
float: left;
width: 33,33333%;
background-color: red;
}
.footer .inspirations {
float: left;
width: 33,33333%;
}
/* LOGO SETTINGS */
img.logoBB {
margin: 0 28.95833333333333%;
}
.logosub {
font-family: Federant;
font-size: 17.83px;
color: #94979b;
padding: 0 40.625%;
}
/* MENU SETTINGS */
.menu {
margin: 0 90px;
}
.menu ul {
text-align: center;
list-style-type: none;
margin: 17px auto;
}
.menu li {
display: inline-block;
}
.menu a {
color: black;
text-decoration: none;
font-family: slabo;
font-size: 18px;
}
.menu .top_line {
width: 780px;
margin: 32px 0 0;
height: 2px;
color: black;
background-color: black;
}
.menu .bottom_line {
width: 780px;
margin: 0 0 40px;
height: 3px;
color: black;
background-color: black;
}
我尝试过的(没有成功):
- 将表格应用于页脚
- 对 % 值和像素值使用左、右和中心 float (按此顺序)
- 尝试了页脚中所有内容的固定值(这行得通)，但我的目标是使该网站具有响应性，因此这无论如何都不是可行的方法。
如果您碰巧注意到我犯的任何其他错误，我将不胜感激指出。
最佳答案
您的页脚列需要有 position: relative 才能成为列。此外，您的宽度百分比中有逗号，需要是小数。所以每个页脚 css 如下(当然还有正确的类名——我只是拿了一个作为例子):
.footer .inspirations {
float: left;
width: 33.33333%;
position: relative;
}
关于HTML/CSS 页脚划分为列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32874892/