3 列响应式页脚

Question

我有一个用于缩略图的响应式网格布局和一个全宽标题。它是使用“ul”和“li”来构建网格的。所以基本上我没有在整个过程中使用响应式网格布局。虽然我想在底部有一个响应式的三列页脚（堆叠在一起）

我希望第一列完全左对齐，其他两列右对齐。每列仅占总宽度的 15% 左右（所以我不能只拥有所有三个宽度 33%）我想要三列布局的功能，就像在骨架样板等许多主题中一样

我在制作一个好的 CSS 标记时遇到了麻烦，我已经使用过......

css

F1 {
padding: 15px;
width: 100px;
margin: 0 0 0 20px;
float: right;
}

.F2 { 
float: left;
text-align: left; 
}

.F3 { 
font-size: 13px;
text-align: right;
float: right; 
}

但这只是分隔 div，并没有提供太多控制

非常感谢任何帮助或帮助参考

Answer 1

如果我理解正确，以下可以工作。与 div 一起显示，但 ul & li 结构也可以。

HTML：

<div class="footer">

  <div class="f1">first left</div>

  <div class="f2">middle right</div>

  <div class="f3">last right</div>

  </div>

CSS：

.footer {

   text-align: center;
   width: 100%;

}

 .f1 {

   background: green;
   padding: 0;
   margin: 0;

 }

 .f2 {

   background: pink;

 }

 .f3 {

   background: blue;

 }

 .f1,
 .f2,
 .f3 {

  -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   text-align: right;
   font-size: 12px;
   padding: 0 8%;
   min-width: 300px;
   width: 33%;

 }

.f1 {

    text-align: left;

  }

如果您将 div 设置为显示具有最小宽度的 inline-block，则在浏览器调整大小时，列将开始堆叠在另一列之上。

或者，根据样式，您可能希望将它们设置为不带最小宽度的 inline-block，并为它们设置媒体查询以在您希望它们堆叠在一起的所有屏幕尺寸上显示块。

如果将 box-sizing 设置为 border-box，则可以在容器内部添加必要的填充，以使内容区域保持在总宽度的 15% 左右。

希望这会有所帮助！