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

Posted 2023-03-06

【中文标题】在 CSS 中创建结合百分比和静态（例如像素）值的网格的研究

【英文标题】：Research on creating grids that combine percentage and static (e.g. pixel) values in CSS

【发布时间】：2014-11-18 01:16:49

【问题描述】：

我只想做一个关于响应式网页设计的研究。不要把这个问题当作一个必须解决的问题。这只是一个实验:)

有时我们需要结合百分比和固定值进行尺寸计算，尤其是在创建一些响应式布局时。就我而言，我发现了四种方法可以在纯 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 解决方案。

方案一——跨浏览器固定布局表格

示例：FIDDLE

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

这可能是最受支持的解决方案 (read more)。

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

示例：FIDDLE

calc() 函数使我们能够将百分比和固定值结合起来，例如：

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

很遗憾，这不是跨浏览器解决方案 (read more)，建议使用后备方案 (read more)。

解决方案 3 - 灵活的 flexbox

示例：FIDDLE

这可能是响应式网页设计的未来。我已经在瞬间实现了所需的布局。 Flexbox 提供了许多有趣的功能 (read more)。

您可以阅读here 了解兼容性。

解决方案 4 - 边距操作和绝对定位

示例：FIDDLE

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

总结

这是响应式世界中一个非常常见的问题，我很好奇是否还有其他想法如何在纯 CSS 中解决它。对此的任何想法将不胜感激。

脚注

尝试将 fiddle 的预览窗格缩小到最小宽度 - 在我看来，好的、有价值的表格仍然表现得最可预测；）

问候。

【问题讨论】：

这个问题似乎是题外话，因为它是关于收集可行解决方案的替代选项。

【参考方案1】：

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

jsBin demo

...只是模仿table 的方式， 并使用table-layout: fixed; 防止拉伸：

article, aside 
  display:table-cell;

aside 
  width: 50px;  

section 
  display:table;
  table-layout: fixed;
  width:100%;

另见：Two column template with static and responsive width

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

【讨论】：

之所以有效，是因为我为两篇文章添加了相同的示例文本：) 第一个解决方案中已经描述了“默认”表的问题。

@luke :) 你是对的！只需添加被遗忘的table-layout: fixed; 即可修复 :)

这正是第一个解决方案。唯一的区别是您没有对部分使用表格行显示。这里好像没必要：）

@luke... sh*t 我真的错过了你长长的问题中的那个...无论如何。这就是我要走的路。从现在开始的 2 年内，我将完全切换到 calc()，而不必担心 xB 补偿。

@luke 好的，所以基本上我真的相信（截至今天）没有更好/更简单的方法可以做到这一点。

【参考方案2】：

我通过将两篇文章放入容器元素“.left”中稍微打破了您的条件，但这是我通常使用的技术。给旁边一个固定的宽度，并给响应内容一个相同数量的 padding-right，这样它们就不会重叠。

http://jsfiddle.net/John_C/fhvp3pod/

.left
    padding-right:50px;

aside
    position:absolute;
    top:0;
    right:0;
    width:50px;

这种方法的主要缺点是aside在主渲染树之外，所以如果aside比主要内容长，它不会下推页面后面的元素。