左右布局 - 多种实现方式 | CSS-Tricks

几年前，我们在 CSS-Tricks 上发布了关于此想法的文章。我们认为现在是时候更新它并详细地讨论这个主题了。

想象一下，您需要将布局分成两半。左侧的内容和右侧的内容。基本上需要在容器内创建两个等高列。每一侧占据容器的正好一半，在两者之间形成明显的分割。像 CSS 中的许多东西一样，实现这一点有很多方法，我们现在将介绍其中许多方法！

使用背景渐变

我们可以通过使用渐变来创建改变背景的外观。一半的背景设置为一种颜色，另一半设置为另一种颜色。而不是从一种颜色渐变到另一种颜色，在中间设置一个零空间颜色停顿点。

.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}

这适用于单个容器元素。但是，这也意味着，如果内容需要填充容器的两侧，则需要使用浮动或其他布局方法。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与背景渐变示例。

使用绝对定位

另一种方法是，在父容器内设置两个容器，以绝对定位，使用百分比将它们分成两半，然后应用背景。这里的好处是，我们现在有两个独立的容器，可以容纳它们自己的内容。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与绝对定位示例。

绝对定位有时是完美的解决方案，有时却不可行。这里的父容器需要设置高度，而设置高度通常对内容来说是坏消息（内容会发生变化！）。更不用说绝对定位的元素会脱离文档流。因此，很难让它在将其他内容向下推的时候正常工作。

使用 (伪) 表格

是的，是的，表格太老派了（更不用说充满了可访问性问题和布局灵活性问题）。好吧，使用 display: table-cell; 属性实际上是一种方便的方法，可以创建这种布局，而无需在 HTML 中编写表格标记。简而言之，我们将语义父容器变成表格，然后将子容器变成表格内的单元格 - 全部在 CSS 中完成！

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与表格显示示例。

您甚至可以在这里很容易地在断点处更改显示属性，使两侧在较小的屏幕上堆叠。 display: table; (以及它的朋友) 支持到 IE 8 甚至旧的 Android，所以它非常安全！

使用浮动

我们可以使用我们的好朋友 float 将容器排列在一起。这里的好处是，它避免了绝对定位（正如我们所提到的，它可能很乱）。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与浮动示例。

在这个例子中，我们显式地设置高度，使它们保持一致。但实际上，默认情况下，浮动并不能提供这种能力。您可以使用我们已经介绍的背景渐变技巧，这样它们看起来就一致。或者，看看巧妙的负边距技巧等方法。

还要记住，您可能需要在父元素上清除浮动，以保持文档流的正常运行。

使用行内块

如果清除浮动后的元素显得繁琐，那么使用 display: inline-block 则是另一种选择。这里的诀窍是，确保用于单独侧面的元素在 HTML 中没有任何间断或空格。否则，该空格将被渲染成文字空格，第二部分将断开并向下掉。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与行内块示例。

同样，行内块并没有任何方法可以帮助我们使两侧的高度保持一致，因此您必须明确地指定它。

还有其他潜在的方法可以解决上面描述的间距问题。

使用 Flexbox

Flexbox 是一个非常棒的方法，但请注意，它仅限于 IE 10 及更高版本，您可能需要使用前缀和值来实现最佳支持。

使用这种方法，我们将父容器变成弹性盒子，子容器占据相同比例的空间。无需设置宽度或高度！ Flexbox 知道该怎么做，因为默认值非常适合此目的。例如，flex-direction: row; 和 align-items: stretch; 是我们想要的，但它们是默认值，因此我们不必设置它们。为了确保它们保持一致，在两侧设置 flex: 1; 是一个好主意。这将迫使它们占据相同的空间比例。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与 Flexbox 示例。

在这个演示中，我们还将侧面容器设置为弹性容器，只是为了好玩，以便处理垂直和水平居中。

使用网格布局

对于那些生活在技术前沿的人来说，CSS 网格布局技术就像将 Flexbox 和表格方法合并到一起。换句话说，定义一个容器，然后将其分成列和单元格，这些单元格可以灵活地填充子元素。

如果下面的演示中的单元格堆叠在一起，则表示您的浏览器不支持 CSS 网格。在撰写本文时，支持仅限于 Firefox、Chrome、Safari 和 Opera（Opera Mini 除外）。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的左侧/右侧与网格布局示例。

CSS 的强大功能真是令人惊叹，它为我们提供了多种实现方式！

philtune

# 2015年3月17日

我经常使用 (伪) 表格；每当我有可变大小的内容并希望所有内容都保持一致的高度时；每当我想让水平元素具有加权宽度（例如导航栏）时；每当我想对内容进行 vertical-align: [whatevs]; 调整时。虽然大多数情况下，如果我有固定高度/宽度元素，并且想要居中对齐，我会使用行内块。但我认为人们想得太多，display: table(-cell); 可以非常有效地解决很多问题。我认为，在我们等待 Flexbox 支持变得更加普及之前，人们应该将表格显示保留在他们的工具箱中。

Robert Smith

评论永久链接# 2015年3月18日

这正是我工作的方式。我广泛地使用 Harry Roberts 的“标志对象”。flexbox 的许多功能都可以用 display table 来实现。我很乐意继续以这种方式工作，直到我们不再支持 IE9 为止。

Kevin Martin

# 2015 年 3 月 17 日

你也可以使用 CSS 列。它受 IE 10、Chrome 4+、Firefox 2+、Safari 3.1+、Opera 15+ 支持。

http://codepen.io/KevinMartin/pen/zxMLOz

@Chris，如果你愿意，可以将这个 Pen 添加到你的文章中。

Benjamin Solum

永久链接到评论# 2015 年 3 月 17 日

我本来也想在评论区发布同样内容。如果你想将内容定位到类似报纸的版块中，这是一个很棒的方法！

更多信息请访问这里：https://mdn.org.cn/en-US/docs/Web/CSS/columns
Vesa Piittinen

永久链接到评论# 2015 年 3 月 20 日

如果列解决方案稳定，会很不错。你需要等高的内容才能使它正常工作。在这种情况下，你可以删除或添加一些内容来使第三列出现——无论删除或添加，你都可以得到第三列。简而言之，你不应该使用它来做这种布局，因为它很容易触发副作用。

Meh

# 2015 年 3 月 17 日

我认为所有解决方案都很好，但是像网格示例中展示的 vh 或 vw 的使用效果最好。

Hood 分享了非常有用的知识。

Dominic

# 2015 年 3 月 17 日

在 FF37 中，背景渐变版本导致两种颜色之间出现轻微的模糊边缘，其他版本都是锐利的。

Katsampu

# 2015 年 3 月 17 日

我们想要的是相同的左右基础布局，我们希望它能够固定（左）流体（右）列，反之亦然。此外，我们希望一个响应式解决方案。

因此，我们使用混合解决方案来实现它，固定浮动列元素、背景渐变，以及带有负边距的侧边栏的实心背景。

[左侧边栏：https://www.skroutz.gr/c/40/kinhta-thlefwna.html 以及
右侧边栏 https://www.skroutz.gr/c/86/kinhth-thlefwnia.html%5D

Karan Vyas

# 2015 年 3 月 17 日

我也尝试过一些方法来实现这种效果，但仍然无法确定在响应式情况下应该考虑哪一种。

Kevin Martin

永久链接到评论# 2015 年 3 月 18 日

以上所有方法都是响应式的，可以通过添加媒体查询来进一步响应，从而在不同屏幕尺寸上产生不同的反应。

Vesa Piittinen

# 2015 年 3 月 18 日

我使用混合技术来创建这种效果。混合技术比使用单一特定技术更强大、更灵活。

http://codepen.io/Merri/pen/MYzMro

这应该在所有浏览器中完美运行，包括 IE8、Opera Presto 和 Safari 5 Windows。

Vesa Piittinen

永久链接到评论# 2015 年 3 月 18 日

只是因为……我让它在 IE6 和 IE7 中运行起来。我喜欢当这些奇怪的浏览器表现正常的时候。

http://codepen.io/Merri/pen/ogJNgq
Katsampu

永久链接到评论# 2015 年 3 月 20 日

真的很喜欢你的技术。我从那里开始，实现了一个固定流体布局，带有最大宽度和居中定位。

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”Byvdbw” default_tab=”result” user=”katsampu”]查看 Giorgos Katsiampas 在 CodePen 上的 Pen 左半部分和右半部分布局 (@katsampu)。[/codepen_embed]
Katsampu

永久链接到评论# 2015 年 3 月 20 日

真的很喜欢你的技术。我从那里开始，实现了一个固定流体布局，带有最大宽度和居中定位。

http://codepen.io/katsampu/pen/Byvdbw
Vesa Piittinen

永久链接到评论# 2015 年 3 月 20 日

@Katsampu

修复了你遇到的溢出问题，保持居中和固定大小，但牺牲了较小宽度的流畅性。必须选择一个响应式解决方案。纯流体布局在较低宽度下也没有好太多，所以我认为让滚动条正确显示比失去流畅性更重要。

http://codepen.io/Merri/pen/bNOMzY

Seth Whitaker

# 2015 年 3 月 20 日

固定流体布局的更简单版本可以很容易地实现。忽略背景颜色/相同高度的部分。
只需为你的静态列指定宽度并左浮动，并将流体右列设置为 overflow hidden。向容器添加所需的清除浮动。

section{
  //preferred clearfix solution
}
.left-side{
  width:200px;
  float:left;
}
.right-side{
  overflow:hidden;
}

Vesa Piittinen

永久链接到评论# 2015 年 3 月 20 日

不，这与这里展示的内容无关。重点是拥有一个允许对等高背景进行样式化或给人以两列等高的感觉的东西。

你的解决方案是最基本的基于浮动的布局，如果右侧内容比左侧内容更长，它将无法正常工作：它会导致右侧内容流到左侧内容下方。
[email protected]

永久链接到评论# 2015 年 3 月 21 日

即使内容更长，第二列也不会绕过第一列，因为通过 overflow hidden 创建了新的块级格式上下文。不过，确实，这种解决方案对于等高列没有太大帮助。

Sharky

# 2015 年 3 月 24 日

网格布局值得一看，比 Flexbox 拥有更多控制权，比其他一些方法更容易使用。有 polyfills 可用，例如 https://github.com/codler/Grid-Layout-Polyfill

Arjun

# 2015 年 3 月 25 日

我过去经常在 div 中使用浮动。有人可以展示不同浏览器和不同设备上的基本性能吗？

此评论线程已关闭。如果您有重要的信息需要分享，请联系我们。