html - 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 设置为显示具有最小宽度的内联 block ，则在浏览器调整大小时，列将开始堆叠在另一列之上。

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

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

希望这对您有所帮助!