WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Узнать подробнее
Регистрация на сайте
Несколько примеров, используя разные CSS свойства
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multicolumns</title>
<style>
div{
background-color: #EEE;
}
#colTest1{
columns: 2;
}
#colTest2{
columns: 3;
column-rule: 1px dotted red;
}
#colTest3{
width: 100%;
display: flex;
flex-flow: row;
}
.col1{
margin: 20px;
}
#colTest4
{
display: grid;
grid-template-columns: 200px 1fr 300px;
}
#colTest4 .col1:last-child{
grid-column: 1 / 4;
}
</style>
</head>
<body>
<h1>Используя CSS свойство columns</h1>
<p id="colTest1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime
aspernatur aliquam repellendus tenetur eum expedita minima labore, error
ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam
molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad
atque expedita, minima ipsum facilis commodi cum eos dolor quae odit.
Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur
expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem
iure nulla a, vel distinctio pariatur repellendus aliquid hic illum
recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing
elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic,
laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci
placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum,
modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem
ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo
recusandae consectetur eos, temporibus laudantium hic eligendi pariatur
similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel
mollitia!
</p>
<p id="colTest2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime
aspernatur aliquam repellendus tenetur eum expedita minima labore, error
ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam
molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad
atque expedita, minima ipsum facilis commodi cum eos dolor quae odit.
Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur
expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem
iure nulla a, vel distinctio pariatur repellendus aliquid hic illum
recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing
elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic,
laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci
placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum,
modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem
ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo
recusandae consectetur eos, temporibus laudantium hic eligendi pariatur
similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel
mollitia!
</p>
<hr>
<h1>Используя CSS FLEX</h1>
<div id="colTest3">
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
</div>
<hr>
<h1>Используя CSS GRID</h1>
<div id="colTest4">
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
<p class="col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam.
</p>
</div>
</body>
</html>