gpt4 book ai didi

html - 我将如何并排制作三个文本主体?

转载 作者:行者123 更新时间:2023-11-27 23:38:35 25 4
gpt4 key购买 nike

我的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 的最佳解决方法是什么?

最佳答案

我想不出一个纯 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

(很棒的电影,顺便说一句。)

关于html - 我将如何并排制作三个文本主体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32703321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com