html - 响应式两列页脚

Question

我需要一个响应式的两列页脚。然而，这个东西并没有响应。我已经在这里展示了它。 http://jsfiddle.net/fVBaB/CSS 代码在这里...

 #leftf
{
width:46%;
display:block;
float:left;
margin-bottom:20px;
border: 1px solid grey;
padding:18px;
height:100px;
}

 #rightf
{
height:100px;
padding:18px;
width:46%;
display:block;
float:right;
margin-bottom:20px;
border: 1px solid grey;
}

 #bottomline
{
width:100%;
display:block;
bottom:0px;
}

Answer 1

这是因为您在宽度上混合了百分比和像素 - 您还使用了 block 而不是 inline-block。将您的 CSS 更改为:

#leftf
{
width:46%;
display:inline-block;
float:left;
margin-bottom:20px;
padding:2%;
height:100px;
}

#rightf
{
height:100px;
padding:2%;
width:46%;
display:inline-block;
float:right;
margin-bottom:20px;
}

#bottomline
{
width:100%;
display:block;
bottom:0px;
}

我还从 #leftf 和 #rightf 中删除了边框，因为这分别添加了一个像素。这是一个演示 http://jsfiddle.net/MY5VE/ .

希望这对您有所帮助!