Question

我正在寻找一种最简单的方法来实现一种看似简单的布局：

enter image description here

...但实际上涉及很多标准，其中许多涉及非平凡的CSS问题：

div中的垂直居中内容......
...其中内容的长度可变（因此距离顶部和底部的距离不能硬编码）......
... div在选择的浮动div中...
...这些div具有百分比宽度以在响应式布局上填充屏幕...
...每个div之间有固定的像素间隙......
...其中div具有纯色背景颜色或图像，div背后的背景不是可以重新应用的已知纯色

此问题的各个要素已在单独的问题中解决（例如vertically aligning floated divs和pixel gaps between responsive percentage-width divs），但我找不到任何组合它们的内容。

最简单意味着：

尽可能少的HTML包装
最小的额外Javascript（如果可能，没有）
当断点更改每行上的div数时需要更改的最小CSS
最小的代码，怪癖或脆弱的CSS欺骗（例如，依赖可能在将来发生变化的浏览器怪癖）
最小的跨浏览器问题（理想情况下，应该在IE8 +上使用最少的IE特定标记）

Answer 1

这是我能想到的最简单的事情。下面的代码片段。它基本上是一种垂直居中浮动的现有方法，将背景放在中间包装上，并使用外包装上的填充而不是box-sizing: border-box;的边距设置固定的像素间隙。

JSBIN demo

每个块有三个HTML元素 - 这似乎是内部内容没有已知高度的任何浮动的垂直居中内容的最小值。
没有JS
只需要更改％width以更改每行的块数
如果文本内容对于div来说太大，则div会略微扩展而不会破坏布局 - 如果不合需要，可以应用overflow: hidden;
在没有问题的情况下在IE8上运行（如果任何可怜的灵魂仍然需要支持IE7，则在IE7上失败）

.box-outer {
  box-sizing: border-box;
  float: left;

  /* editable */
  width: 50%;
  height: 110px;
  padding: 1px 1px 0px 0px; /* sets gap */
  /* Padding does't collapse like margins - 1px all round gives 2px gaps */
}

.box {
  width: 100%;  
  height: 100%;
  box-sizing: border-box; 
  display: table; /* height doesn't fill without display: table */

  /* editable: */
  background: #99ffff;
  padding: 8px;
}

.box-inner {
  vertical-align: middle;
  display: table-cell;
}

.boxes-container {
  padding: 0px 0px 1px 1px; /* opposite of each box's padding */

  /* editable: */
  background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg');
}

<div class="boxes-container clearfix">
 
  <h2>  Title </h2>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box content
      </div>
    </div>
  </div>

  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box with longer content
      </div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box
      </div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box with significantly longer textual content
      </div>
    </div>
  </div>

  <br/>
  <p style="text-align: center;"> <--- responsive width ---> </p>
  
</div>

在具有固定像素边距的响应框内垂直居中可变长度内容？

1 个答案:

JSBIN demo