Как сделать бок о бок Divs (с <p> внутри) в виде таблицы с двумя столбцами

Я пытаюсь создать параллельную таблицу с двумя столбцами div, которая содержит много элементов <p> внутри. Это было бы легко, если бы эти два элемента Div и их содержимое были горизонтальны, но в этом случае они вертикальны, высота двух сторон не одинакова.

Есть ли способ сделать это без использования JavaScript?

*Обновлено: Причина, по которой я разместил два отдельных элемента div рядом, заключается в том, что я помещаю в них новый контент с помощью JavaScript Prepend. С левой стороны находятся тексты на английском языке, а с правой стороны — переведенные тексты. Мне было бы проще, если бы английские тексты были вместе внутри div и то же самое для переведенных текстов.

Я сделал это, используя Javascript и установив стиль одной стороны. высота = высота клиента другой стороны, было бы намного лучше, если бы я мог сделать это только с помощью CSS и HTML

for (let i = 0; i < document.querySelectorAll('#div1 p').length; i++) {
  
document.querySelectorAll('#div1 p')[i].style.height = "auto";
document.querySelectorAll('#div2 p')[i].style.height = "auto";



if (document.querySelectorAll('#div1 p')[i].clientHeight > document.querySelectorAll('#div2 p')[i].clientHeight )
{
 document.querySelectorAll('#div2 p')[i].style.height = document.querySelectorAll('#div1 p')[i].clientHeight-3+'px'
}
else 
{
 document.querySelectorAll('#div1 p')[i].style.height = document.querySelectorAll('#div2 p')[i].clientHeight-3+'px'
}
}

body {
  font-family: Consolas,Menlo,"courier new",monospace;
  font-size: 18px;
}

.grid-container {}

#div1{
  width: 50%;
  display: table-cell;
}

#div2{
  width: 50%;
  display: table-cell;
}

p{
  margin-top: 0px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #0000ff00;
  border-color: gray;
}

<div class = "grid-container">
  <div id = "div2" class = "skiptranslate"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
    <p> the second cell</p>
    <p> the 3rd cell </p>
    <p> the 4th cell </p>
  </div>
  <div id = "div1" >
    <p> I want this cell's height same as the left "lorem ipsum" cell </p>
    <p> the second cell</p>
    <p> the 3rd cell</p>
  </div>
</div>

Вам нужно иметь строки, которые занимают всю ширину

— 09.05.2022 14:13

html css

09.05.2022 14:10

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот как бы я это сделал, со строками, занимающими 100%, и ячейками, занимающими 50%

.cell {
  width: 50%
}

.row {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 0px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #0000ff00;
  border-color: gray;
}

body {
  font-family: Consolas, Menlo, "courier new", monospace;
  font-size: 18px;
}

<div class = " grid-container">
  <div class = "row">
    <div class = "cell">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
    </div>
    <div class = "cell">
      <p> I want this cell's height same as the left "lorem ipsum" cell </p>
    </div>
  </div>
  <div class = "row">
    <div class = "cell">
      <p> the second cell</p>
    </div>
    <div class = "cell">
      <p> the second cell</p>
    </div>
  </div>
  <div class = "row">
    <div class = "cell">
      <p> the 3rd cell </p>
    </div>
    <div class = "cell">
      <p> the 3rd cell </p>
    </div>
  </div>
  <div class = "row">
    <div class = "cell">
      <p> the 4th cell </p>
    </div>
    <div class = "cell"></div>
  </div>
</div>

Да, спасибо LK77 и Rhyan-WoodsAndWalker за помощь. Причина, по которой я разместил два отдельных элемента div рядом, заключается в том, что я помещаю в них новый контент с помощью JavaScript Prepend. С левой стороны находятся тексты на английском языке, а с правой стороны — переведенные тексты. Мне было бы проще, если бы английские тексты были вместе внутри div и то же самое для переведенных текстов. Я сделал это, используя Javascript и установив style.height одной стороны = clientHeight другой стороны.

— 09.05.2022 15:19

Ну, так проще сделать, так как вы создаете строку и помещаете в нее английский текст и перевод одновременно, наличие двух отдельных столбцов усложняет работу как для css, так и для js.

— 09.05.2022 15:24

09.05.2022 14:19

просто чтобы добавить к хорошему ответу LK77 - есть ли причина, по которой вы не можете просто использовать здесь элемент <table>? Это самое простое решение.

в противном случае более современным решением является рефакторинг HTML для удаления столбца divs, тогда вы можете использовать display: flex или display: grid для этого:

.flex-table {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  border: 1px solid;
}

.flex-table p {
  margin: 0;
  flex: 0 0 50%;
  max-width: 50;
 }

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 600px;
  border: 1px solid;
}

.grid-table p {
  margin: 0;
  padding: 5px;
 }


/**
Just to show the different columns
**/
.table p:nth-child(2n) {
  background-color: rgba(255,0,0,.5);
}

<div class = "flex-table table">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum second cell</p>
  <p>Lorem ipsum third cell</p>
  <p>Lorem ipsum fourth cell</p>
  <p>Lorem ipsum fifth cell</p>
  <p>Lorem ipsum sixth cell</p>
</div>
  
  
  <div style = "margin-bottom: 30px"></div>
  
<div class = "grid-table table">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum second cell</p>
  <p>Lorem ipsum third cell</p>
  <p>Lorem ipsum fourth cell</p>
  <p>Lorem ipsum fifth cell</p>
  <p>Lorem ipsum sixth cell</p>
</div>

Да. Спасибо, что дали мне много способов, я отредактировал причину и решение. Надеюсь, это кому-то еще понадобится.

— 09.05.2022 15:33

09.05.2022 14:37