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

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

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

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

图1

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

图2

提取对应的 HTML 和 CSS

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

图3

图4

把 HTML 和 CSS 代码分享出来

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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

图片版权

头图：Banner Image by milkusmaximus from Pixabay

求扫码打赏
“我这么可爱，请给我钱 o(*^ω^*)o”
IT技术
#IT技术 #前端
纽约时报中文网的双栏排版太牛逼了
https://blog.kukmoon.com/41be352569c0/
作者
Kukmoon谷月
发布于
2022年3月26日
许可协议