Пользовательский макет с двумя столбцами ⇐ CSS

[Anonymous]

У меня возникла проблема с отображением двух столбцов в моем HTML-коде.

Верхняя часть двух столбцов:
[img]https:// i.sstatic.net/GKW6dUQE.png[/img]

Пробел в первом столбце, абзац во втором столбце был сдвинут вниз из-за изображение:



Вот мой HTML-код ниже

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const column1    = document.getElementById('column1');
const column2    = document.getElementById('column2');
const image      = column2.querySelector('img');
const paragraphs = Array.from(column1.querySelectorAll('p'));

const distributeParagraphs = () => {
column2.innerHTML = '';
column2.appendChild(image);

let column1Height = column1.offsetHeight;
let column2Height = image.offsetHeight;

paragraphs.forEach(paragraph => {
column1.appendChild(paragraph);
});

while (Math.abs(column1Height - column2Height) > paragraphs[0].offsetHeight && paragraphs.length > 0) {
const lastParagraph = paragraphs.pop();
column2.appendChild(lastParagraph);
column1Height -= lastParagraph.offsetHeight;
column2Height += lastParagraph.offsetHeight;
}
};

window.addEventListener('resize', distributeParagraphs);
distributeParagraphs();
});

Код: Выделить всё

body {
font-family: Arial, sans-serif;
}

.container {
display: flex;
flex-wrap: wrap;
}

.column {
width: 50%;
flex: 1;
padding: 10px;
box-sizing: border-box;
}

#column1,
#column2 {
width: 50%;
}

img {
display: block;
max-width: 100%;
height: auto;
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum.  Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus.  Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien.  In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta. Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum sapien dui, vitae rhoncus magna imperdiet in. Nam imperdiet in turpis sit amet vulputate. Nunc congue velit sit amet mi rhoncus faucibus. Nunc egestas sed enim id cursus. Integer
lacinia in mauris quis facilisis. Praesent et ullamcorper purus. Pellentesque volutpat faucibus nisl quis porta.  Sed tempor eleifend rhoncus.
Sed ac eros diam. Mauris id felis hendrerit, ornare dolor in, molestie sapien. In pulvinar nisi vitae sem sagittis fringilla. Ut finibus ipsum id condimentum sodales. Aliquam tellus nisi, dignissim eu porta ut, eleifend in tellus. Aenean pharetra,
justo vitae varius dapibus, tellus ipsum suscipit nibh, id scelerisque ante odio id libero. Maecenas hendrerit posuere est a fermentum. Nullam sed turpis non nulla tincidunt ullamcorper quis pulvinar nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Proin egestas interdum magna eget interdum. Nullam non fermentum libero.
Ut vel urna mauris. Ut sit amet nisi eu metus pretium fringilla. Vivamus tincidunt nulla ipsum, nec dapibus sapien aliquet at. In pellentesque diam felis, vitae tempus libero porta scelerisque. Vivamus faucibus ut ligula at volutpat. Nulla vehicula
nunc in suscipit rutrum. Ut congue ornare nisi eu maximus. Mauris ac lorem id est ultricies convallis a nec tellus. Praesent eleifend et velit in sagittis. Nam ornare nisl eu mi gravida, rutrum luctus nisl posuere. Maecenas fermentum elit et rhoncus
dignissim. Nam eu tellus eget est bibendum varius. Duis in lacus nec erat auctor semper.



[img]https://picsum.photos/seed/picsum/640/426[/img]

Я пытался обновить Javascript, но проблема все еще сохраняется. Я хочу избавиться от места внизу 1-го столбца. Я хочу, чтобы абзацы были распределены правильно, независимо от размера изображений.

Подробнее здесь: https://stackoverflow.com/questions/787 ... umn-layout