我将如何并排制作三个文本主体？
How would I go about making three bodies of text side-by-side?
我的HTML如下：
<!DOCYTPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Side-by-Side</title>
</head>
<body>
<div class="passage">
<div class="section">
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
<div class="section">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
</div>
</div>
<div class="passage">
<div class="section">
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
</div>
<div class="section">
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
</div>
</div>
<div class="passage">
<div class="section">
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</div>
<div class="section">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</body>
</html>
我希望我的内容显示如下：
+--------------------------+--------------------------+--------------------------+
| The path of the | Normally, both your | Now that we know who you |
| righteous man is beset | asses would be dead as | are, I know who I am. |
| on all sides by the | fucking fried chicken, | I'm not a mistake! It |
| iniquities of the | but you happen to pull | all makes sense! In a |
| selfish and the tyranny | this shit while I'm in a | comic, you know how you |
| of evil men. Blessed is | transitional period so I | can tell who the |
| charity and good will, | don't wanna kill you, I | arch-villain's going to |
| shepherds the weak | wanna help you. But I | be? He's the exact |
| through the valley of | can't give you this | opposite of the hero. |
| darkness, for he is | case, it don't belong to | And most times they're |
| truly his brother's | me. Besides, I've | friends, like you and |
| keeper and the finder of | already been through too | me! I should've known |
| lost children. And I | much shit this morning | way back when... You |
| will strike down upon | over this case to hand | know why, David? Because |
| thee with great | it over to your dumb | of the kids. They called |
| vengeance and furious | ass. | me Mr Glass. |
| anger those who would | | |
| attempt to poison and | | |
| destroy My brothers. And | | |
| you will know My name is | | |
| the Lord when I lay My | | |
| vengeance upon thee. | | |
+--------------------------+--------------------------+--------------------------+
| Well, the way they make | Now that there is the | You think water moves |
| shows is, they make one | Tec-9, a crappy spray | ice. It moves like it |
| show. That show's called | gun from South Miami. | has a mind. Like it |
| a pilot. Then they show | This gun is advertised | knows it killed the |
| that show to the people | as the most popular gun | world once and got a |
| who make shows, and on | in American crime. Do | taste for murder. After |
| the strength of that one | you believe that shit? | the avalanche, it took |
| show they decide if | It actually says that | us a week to climb out. |
| they're going to make | in the little book that | Now, I don't know |
| more shows. Some pilots | comes with it: the most | exactly when we turned |
| get picked and become | popular gun in American | on each other, but I |
| television programs. | crime. Like they're | know that seven of us |
| Some don't, become | actually proud of that | survived the slide... |
| nothing. She starred in | shit. | and only five made it |
| one of the ones that | | out. Now we took an |
| became nothing. | | oath, that I'm breaking |
| | | now. We said we'd say it |
| | | was the snow that killed |
| | | the other two, but it |
| | | wasn't. Nature is lethal |
| | | but it doesn't hold a |
| | | candle to man. |
+--------------------------+--------------------------+--------------------------+
如果没有 CSS，我希望每个整列都是一个文本主体，呈现三个文本主体。
我知道我可以手动设置每个部分的高度，但是 CSS 有没有办法自动执行此操作，将每个部分的高度设置为部分的最大初始高度的高度它对应的行？如果不是，不使用 JavaScript 的最佳解决方法是什么？
您可以使用您提供的 HTML 为您的 CSS 尝试此操作：-
CSS
.container {
display: flex;
flex-grow: 1;
align-items: flex-start
}
.passage {
margin: 1%;
}
.section {
border: 1px solid black;
height: 400px;
width: 200px;
padding: 0% 2%;
}
p {
text-align: justify;
}
这是一个现场演示 - DEMO
您可以删除 section 上的 width 属性 以获得更流畅的布局，但如果您更喜欢固定宽度，则坚持使用像素值。
这是一支代码笔，可以让您非常接近您尝试做的事情。您将不得不试验这些部分的填充，以获得您想要的效果
http://codepen.io/mcclaskiem/pen/qONxLN
* {
box-sizing: border-box;
}
.passage {
width: 33.333333%;
float: left;
padding: 0 1%;
}
.section {
width: 100%;
float: left;
}
我想不出一个仅 CSS 的响应式解决方案，其中一行中的表亲元素的高度可以作为它们最大的表亲元素。
但是，如果您可以删除段落元素并只保留部分，这里有一个 flexbox 解决方案：
CSS
.container {
display: flex;
flex-wrap: wrap;
}
.section {
width: 33.33%;
box-sizing: border-box;
padding: 0 0.5em;
border: 1px solid silver;
}
.section:nth-of-type(1) {order: 0;}
.section:nth-of-type(2) {order: 3;}
.section:nth-of-type(3) {order: 1;}
.section:nth-of-type(4) {order: 4;}
.section:nth-of-type(5) {order: 2;}
.section:nth-of-type(6) {order: 5;}
HTML
<div class="container">
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
</div>
（很棒的电影，顺便说一句。）
我的HTML如下：
<!DOCYTPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Side-by-Side</title>
</head>
<body>
<div class="passage">
<div class="section">
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
<div class="section">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
</div>
</div>
<div class="passage">
<div class="section">
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
</div>
<div class="section">
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
</div>
</div>
<div class="passage">
<div class="section">
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</div>
<div class="section">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</body>
</html>
我希望我的内容显示如下：
+--------------------------+--------------------------+--------------------------+
| The path of the | Normally, both your | Now that we know who you |
| righteous man is beset | asses would be dead as | are, I know who I am. |
| on all sides by the | fucking fried chicken, | I'm not a mistake! It |
| iniquities of the | but you happen to pull | all makes sense! In a |
| selfish and the tyranny | this shit while I'm in a | comic, you know how you |
| of evil men. Blessed is | transitional period so I | can tell who the |
| charity and good will, | don't wanna kill you, I | arch-villain's going to |
| shepherds the weak | wanna help you. But I | be? He's the exact |
| through the valley of | can't give you this | opposite of the hero. |
| darkness, for he is | case, it don't belong to | And most times they're |
| truly his brother's | me. Besides, I've | friends, like you and |
| keeper and the finder of | already been through too | me! I should've known |
| lost children. And I | much shit this morning | way back when... You |
| will strike down upon | over this case to hand | know why, David? Because |
| thee with great | it over to your dumb | of the kids. They called |
| vengeance and furious | ass. | me Mr Glass. |
| anger those who would | | |
| attempt to poison and | | |
| destroy My brothers. And | | |
| you will know My name is | | |
| the Lord when I lay My | | |
| vengeance upon thee. | | |
+--------------------------+--------------------------+--------------------------+
| Well, the way they make | Now that there is the | You think water moves |
| shows is, they make one | Tec-9, a crappy spray | ice. It moves like it |
| show. That show's called | gun from South Miami. | has a mind. Like it |
| a pilot. Then they show | This gun is advertised | knows it killed the |
| that show to the people | as the most popular gun | world once and got a |
| who make shows, and on | in American crime. Do | taste for murder. After |
| the strength of that one | you believe that shit? | the avalanche, it took |
| show they decide if | It actually says that | us a week to climb out. |
| they're going to make | in the little book that | Now, I don't know |
| more shows. Some pilots | comes with it: the most | exactly when we turned |
| get picked and become | popular gun in American | on each other, but I |
| television programs. | crime. Like they're | know that seven of us |
| Some don't, become | actually proud of that | survived the slide... |
| nothing. She starred in | shit. | and only five made it |
| one of the ones that | | out. Now we took an |
| became nothing. | | oath, that I'm breaking |
| | | now. We said we'd say it |
| | | was the snow that killed |
| | | the other two, but it |
| | | wasn't. Nature is lethal |
| | | but it doesn't hold a |
| | | candle to man. |
+--------------------------+--------------------------+--------------------------+
如果没有 CSS，我希望每个整列都是一个文本主体，呈现三个文本主体。
我知道我可以手动设置每个部分的高度，但是 CSS 有没有办法自动执行此操作，将每个部分的高度设置为部分的最大初始高度的高度它对应的行？如果不是，不使用 JavaScript 的最佳解决方法是什么？
您可以使用您提供的 HTML 为您的 CSS 尝试此操作：-
CSS
.container {
display: flex;
flex-grow: 1;
align-items: flex-start
}
.passage {
margin: 1%;
}
.section {
border: 1px solid black;
height: 400px;
width: 200px;
padding: 0% 2%;
}
p {
text-align: justify;
}
这是一个现场演示 - DEMO
您可以删除 section 上的 width 属性 以获得更流畅的布局，但如果您更喜欢固定宽度，则坚持使用像素值。
这是一支代码笔，可以让您非常接近您尝试做的事情。您将不得不试验这些部分的填充，以获得您想要的效果
http://codepen.io/mcclaskiem/pen/qONxLN
* {
box-sizing: border-box;
}
.passage {
width: 33.333333%;
float: left;
padding: 0 1%;
}
.section {
width: 100%;
float: left;
}
我想不出一个仅 CSS 的响应式解决方案，其中一行中的表亲元素的高度可以作为它们最大的表亲元素。
但是，如果您可以删除段落元素并只保留部分，这里有一个 flexbox 解决方案：
CSS
.container {
display: flex;
flex-wrap: wrap;
}
.section {
width: 33.33%;
box-sizing: border-box;
padding: 0 0.5em;
border: 1px solid silver;
}
.section:nth-of-type(1) {order: 0;}
.section:nth-of-type(2) {order: 3;}
.section:nth-of-type(3) {order: 1;}
.section:nth-of-type(4) {order: 4;}
.section:nth-of-type(5) {order: 2;}
.section:nth-of-type(6) {order: 5;}
HTML
<div class="container">
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
<div class="section">...</div>
</div>
（很棒的电影，顺便说一句。）