响应两列页脚

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

希望这有帮助！