研究创建结合CSS中百分比和静态(例如像素)值的网格

Question

我只是想进行一项涉及响应式网页设计的研究.不要将这个问题视为必须解决的问题.这只是一个实验:)

有时我们需要将百分比和固定值结合起来进行维度计算,尤其是在创建一些响应式布局时.就我而言,我发现有四种方法可以在纯CSS中实现预期的效果.

问题

让我们快速浏览一下这个问题 - 我们需要创建一个三列布局,扩展到整个页面宽度,其中一列具有恒定宽度,每个剩余列填充可用空间的一半.

<main>
  <section>
    <article class="first">
      I fill out half of the available space!
    </article>
    <article class="second">
      I fill out half of the available space!
      <strong>Be aware that contents of article and aside may be changed!</strong>
    </article>
    <aside>
      I'm 50px width!
    </aside>
  </section>
</main>

我们必须实现以下布局而不修改HTML结构,内容<article>和<aside> 可能会改变.只接受纯CSS解决方案.

解决方案1 ​​ - 跨浏览器的固定布局表

示例:FIDDLE

默认表中每列的宽度是自动计算的,取决于单元格的内容.为了解决问题,我们需要强制列的大小,因此此解决方案使用具有table-layout属性设置的表fixed.它允许设置任何列的宽度.

它可能是最受支持的解决方案(了解更多).

解决方案2 - 使用calc()函数

示例:FIDDLE

calc()函数使我们能够组合百分比和固定值,例如:

article {
  width: calc(100% - 50px);
}

不幸的是,这不是跨浏览器解决方案(阅读更多),建议使用回退(阅读更多).

解决方案3 - 灵活的flexbox

示例:FIDDLE

这可能是响应式网页设计的未来.我已经实现了所需的布局.Flexbox提供了许多有趣的功能(阅读更多).

你可以在这里阅读兼容性.

解决方案4 - 保证金操纵和绝对定位

示例:FIDDLE

这是另一个很好的支持解决方案 绝对位置应用于静态aside元素,section具有适当的右边距,两个article元素都添加了50%的宽度.

摘要

这在响应世界中是一个非常普遍的问题,如果有任何其他想法如何在纯CSS中解决它,我很好奇.对此的任何想法将不胜感激.

脚注

尝试将小提琴的预览窗格缩小到最小宽度 - 在我看来,好的,有价值的表仍然表现得最可预测;)

问候.

Answer 1

（编辑：这个与OP的解决方案1类似（/简化），据我所知，他涵盖了所有最流行的解决方案。回顾一下，这是一种使其跨浏览器兼容的巧妙方法）

jsBin 演示

...就是简单地模仿table它的方式，
并使用以下方法防止拉伸table-layout: fixed;：

article, aside {
  display:table-cell;
}
aside {
  width: 50px;  
}
section {
  display:table;
  table-layout: fixed;
  width:100%;
}

另请参阅：具有静态和响应宽度的两列模板

笔记！不要忘记您可以将元素嵌套在两列版本或其他版本中以创建不同的变体。