Как я могу сделать три тела текста бок о бок?

Мой 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?

источник

2015-09-21 Tyler Crompton

Я думаю, что вы могли бы сделать эту работу, устанавливая каждый проход 'поплавка: left'' ширина: 33,333333% ', то внутри каждого прохода делают секции' ширина: 100% ' 'float: left' – mcclaskiem

Разделы не будут вертикально выровнены в строки с этим. –

«Правильный» способ выполнить это будет с [CSS-областями] (http://caniuse.com/#feat=css-regions), который практически не поддерживается. – Scott

Я не могу думать о 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

(Отличный фильм, кстати.)

источник

2015-09-21 20:56:17

Спасибо. Я просто вытащил текст из http://slipsum.com/. Не уверен, что все цитаты из Pulp Fiction или нет. Слишком ленив, чтобы проверить. –

Мой вариант использования заключается в том, что мне нужно выбрать изменения в тексте. Клиент должен иметь возможность видеть изменения бок о бок. Первый столбец - это исходный текст, второй столбец - новый текст, а третий столбец - комментарии относительно изменений (изменений). Клиент должен иметь возможность распечатывать их в формате «бок о бок» или «проход за проходом». К сожалению, изменения настолько разнообразны, что бывают случаи, когда несколько разделов в одном проходе могут совпадать с одним проходом в другом проходе. Есть ли способ стекировать несколько разделов, используя эту технику? –

Группировка по прохождению имеет смысл для вашего прецедента, но для этого вам понадобится JavaScript, чтобы сделать части кузена одинаковой высоты (что не так сложно). Если вы Fiddle (CodePen ...) пример, где мое решение не работает, я посмотрю. –

Вы могли бы попробовать это для CSS с помощью HTML вы предоставили: -

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 для более гибкой компоновки, но если вы предпочитаете фиксированную ширину, то придерживайтесь значения пикселя.

источник

2015-09-21 20:06:03 aphextwix

Есть ли способ выравнивания разделов без явной установки высоты? –

@TylerCrompton - вы хотите, чтобы все элементы были одинаковой высоты без установки высоты? – aphextwix

Вот ручка кода, которая приближает вас к тому, что вы пытаетесь сделать. Вы должны будете экспериментировать с прокладкой на участках, чтобы получить их, как вы хотите

http://codepen.io/mcclaskiem/pen/qONxLN

* { 
    box-sizing: border-box; 
} 

.passage { 
    width: 33.333333%; 
    float: left; 
    padding: 0 1%; 
} 

.section { 
    width: 100%; 
    float: left; 
}

источник

2015-09-21 20:06:52 mcclaskiem

Не похоже, что секции вертикально выровнены друг с другом. –

Вы пытаетесь настроить каждый раздел на одну и ту же высоту? – mcclaskiem

Каждый раздел в соответствующей строке для каждой строки, да. –

Как я могу сделать три тела текста бок о бок?

ответ

Смежные вопросы