我的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的最佳解决方法是什么？
答案 0 :(得分：2)
我无法想到一个只有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>
<强> Fiddle
（伟大的电影，BTW。）
答案 1 :(得分：0)
您可以使用您提供的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
您可以删除width上的section属性以获得更流畅的布局，但如果您更喜欢固定宽度，则坚持使用像素值。
答案 2 :(得分：0)
这是一个代码笔，可以让您非常接近您的尝试。您将不得不在部分上试验填充以获得他们想要的结果
http://codepen.io/mcclaskiem/pen/qONxLN
* {
box-sizing: border-box;
}
.passage {
width: 33.333333%;
float: left;
padding: 0 1%;
}
.section {
width: 100%;
float: left;
}