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＆amp;李结构也会起作用。

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列响应页脚

1 个答案: