纽约时报中文网的双栏排版太牛逼了

本文最后更新于：2022年4月8日 凌晨

纽约时报中文网的双栏排版真的太棒了！

纽约时报中文网 中英双语文章的双栏排版真的太棒了！

左边一栏是英文，右边一栏是对应的中文，高度自适应（图1）。

图1

最牛逼的是，如果减少浏览器窗口的宽度（例如在手机上看），中文段落会自动移动到英文段落的下方（图2）。显然，它使用了 CSS 中的 flex 属性并设置了 wrap 值。

图2

提取对应的 HTML 和 CSS

我用浅薄的前端知识，研究了半天，把对应的 HTML 和 CSS 扒了出来，用在了我自己的电子笔记里（图3、图4）。左边一栏是原文，右边一栏写笔记。

图3

图4

把 HTML 和 CSS 代码分享出来

把 HTML 和 CSS 代码分享出来，如下。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>纽约时报中文网的双栏排版</title>
		<style>
			figure {display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:40px;margin-inline-end:40px;}
			.container,.container-fluid{padding-right:.9375rem;padding-left:.9375rem;margin-right:auto;margin-left:auto;width:100%}
			@-ms-viewport{width:device-width}*,::after,::before{box-sizing:inherit}
			@media (min-width:34em){.container{max-width:34rem}}
			@media (min-width:48em){.container{max-width:45rem}}
			@media (min-width:62em){.container{max-width:60rem}}
			@media (min-width:75em){.container{max-width:72.25rem}}
			.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.9375rem;margin-left:-.9375rem}
			.col-lg-3,.col-lg-5,.col-lg-6{position:relative;width:100%;min-height:1px;padding-right:.9375rem;padding-left:.9375rem}
			@media (min-width:34em){
			.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
			.col-lg-5{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}
			.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
			.form-inline .has-feedback .form-control-feedback{top:0}}*{box-sizing:border-box}
			}
			.article-area .article-content:after,.download:after,.related,.related-cont .refer-list li:after{clear:both}
			.article-area .article-content:after,.article-area .article-content:before{content:" ";display:table}
			.article-area{margin:0 auto}
			.article-area .article-content:after,.article-area .article-content:before{content:" ";display:table}
			.article-area .article-content .article-body .article-inline-photo{padding-left:17.8125rem}
			.article-area .article-content .article-body .article-inline-photo .img-box{width:17.8125rem;margin-left:-17.8125rem}
			.article-area .article-content .article-body .article-inline-photo.large{margin:2rem -1.25rem;padding:0;width:auto;border:none}
			.article-area .article-content .article-body .article-inline-photo.large .img-box{width:100%;float:none;margin:0}
			.article-area .article-content .article-body .article-inline-photo.large figcaption{font-family:Helvetica,Arial,Georgia,"PingFang SC","Heiti SC","Microsoft Yahei",simsun,sans-serif;line-height:1em}
			.article-area .article-content .article-body .article-inline-photo.large figcaption cite,.article-area .article-content .article-body .article-inline-photo.large figcaption span{display:inline}
			.article-area .article-content .article-body .article-inline-photo.large figcaption span{font-size:.8125rem;color:#666}
			.article-area .article-content .article-body .article-inline-photo.large figcaption cite{font-size:.6875rem;color:#666}
			.article-area .article-content.article-dual .article-body{margin-left:0;border-bottom:0;width:100%}
			.article-area .article-content.article-dual .article-body .article-partial{max-width:75rem;margin:0 auto}
			.article-area .article-content.article-dual .article-body .article-body-item{width:100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
			.article-area .article-content.article-dual .article-body .article-body-aside{display:none}
			.article-area .article-content.article-dual .article-body .article-inline-photo{max-width:35.625rem;padding:0;margin:2rem auto;border-top:none}
			.article-area .article-content.article-dual .article-body .article-inline-photo .img-box{width:17.8125rem;float:none;margin:0 auto}
			.article-area .article-content.article-dual .article-body .article-inline-photo figcaption{text-align:center}
			.article-area .article-content.article-dual .article-body .article-inline-photo.large .img-box{width:100%}
			.article-area .article-content.article-dual .article-body .article-inline-photo.large figcaption{text-align:left}
			.article-area .article-content.article-dual .article-body .article-dual-body-item{border-bottom:1px solid #eee;margin:2rem 0 0;font-family:Georgia,"PingFang SC","Heiti SC","Microsoft Yahei",simsun,sans-serif}
			.article-area .article-content.article-dual .article-body .article-dual-body-item:last-child{border:none}
			.article-content .article-body{border-bottom:1px solid #ddd;padding-left:0;margin-left:30px}
			.article-content .article-body .article-paragraph,.article-content .article-body p{font-size:1.125rem;line-height:1.875rem;margin:0 0 1.25rem;color:#333}
			.article-content .article-body .article-inline-photo{width:100%;padding:.625rem 0 .625rem 11.875rem;border-top:1px solid #ddd;margin:.625rem 0}
			.article-content .article-body .article-inline-photo:after,.article-content .article-body .article-inline-photo:before{content:" ";display:table}
			.article-content .article-body .article-inline-photo:after{clear:both}
			.article-content .article-body .article-inline-photo .img-box{width:11.875rem;float:left;margin-left:-11.875rem}
			.article-content .article-body .article-inline-photo .img-box img{width:100%;height:auto}
			@media screen and (max-width:62rem){
			.article-area{padding:0 .9375rem}
			.article-area .article-content.article-dual .article-body .article-dual-body-item{max-width:35.625rem;margin:2rem auto 0}
			.article-area .article-content.article-dual .article-body .article-dual-body-item .col-lg-12,.article-area .article-content.article-dual .article-body .article-dual-body-item .col-lg-6{padding:0}
			}
		</style>
	</head>
	<body>
		<div class="article-area">
			<article class="article-content article-dual font-normal">
				<!-- 整个正文 -->
				<div class="row">
					<!-- 文章内容区 -->
					<section class="article-body">
						<!-- partial 代表文章的一部分，每个 section 有多个 partial，NYTC 在每个 partial 之间插入广告 -->
						<div class="article-partial article-body-item col-lg-5">

							<!-- 分成两栏，每个 article-dual-body-item 代表文章的一段 -->
							<div class="row article-dual-body-item">
								<!-- 第一栏，英文版的一段 -->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									Example text. Example text. Example text. Example text. Example text. Example text. Example
									text. Example text. Example text. Example text. Example text. Example text. Example text.
								</div>
								<!-- 第二栏，中文版的一段-->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
								</div>
							</div>

							<!-- 分成两栏，每个 article-dual-body-item 代表文章的一段 -->
							<div class="row article-dual-body-item">
								<!-- 第一栏，英文版的一段 -->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									Example text. Example text. Example text. Example text. Example text. Example text. Example
									text. Example text. Example text. Example text. Example text. Example text. Example text.
								</div>
								<!-- 第二栏，中文版的一段-->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
								</div>
							</div>

							<!-- 分成两栏，每个 article-dual-body-item 代表文章的一段 -->
							<div class="row article-dual-body-item">
								<!-- 第一栏，英文版的一段 -->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									Example text. Example text. Example text. Example text. Example text. Example text. Example
									text. Example text. Example text. Example text. Example text. Example text. Example text.
								</div>
								<!-- 第二栏，中文版的一段-->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
									示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
								</div>
							</div>

							<!-- 图片 -->
							<figure class="article-inline-photo large">
								<div class="img-box">
									<img src="./picture.jpg" alt="">
								</div>
								<figcaption>
									<span>图片的小标题</span> <cite>图片来源</cite>
								</figcaption>
							</figure>

							<!-- 分成两栏，每个 article-dual-body-item 代表文章的一段 -->
							<div class="row article-dual-body-item">
								<!-- 第一栏，英文版的一段 -->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
								</div>
								<!-- 第二栏，中文版的一段-->
								<div class="col-lg-6 article-paragraph">
									<!-- 插入文字 -->
								</div>
							</div>

						</div>
					</section>
				</div>
			</article>
		</div>
	</body>
</html>

方法

说穿了也没什么难的。

  1. 把网页保存到本地，注意保存格式选择“网页，全部”。
  2. 用文本编辑器和浏览器同时打开 HTML 文件。在网页中打开“开发者工具”（现在叫“检查”或“检查元素”），根据前端开发知识，结合网页的源码，分析网页的结构以及每个元素的 id、class 及其样式，把对应的样式从外部 CSS 文件中复制到 HTML 文件中变成内联样式。
  3. 谷月姐使用的组合是 Notepad++ 和 Firefox （国际版），Notepad++ 结合 Tidy2 插件，梳理 HTML 文件的结构太方便了（图5）。
    图5

【完】

相关阅读

相关阅读：关于 CSS 的 flex 属性

  1. https://www.w3schools.com/cssref/css3_pr_flex.asp
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/flex
  3. https://www.w3school.com.cn/cssref/pr_flex.asp
  4. https://www.runoob.com/cssref/css3-pr-flex.html
  5. https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html