3 列响应式页脚

Question

我有缩略图和全宽的响应式网格布局 header。它是使用 '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 设置为显示具有最小宽度的内联块，则在浏览器调整大小时，列将开始一个堆叠在另一个之上。

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

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

希望对您有所帮助！

3 列响应式页脚

3 column responsive footer

html

css

multiple-columns

responsive-design