72 lines
3.7 KiB
HTML
72 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
|
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<title>multiple columns - tew-0x00</title>
|
||
|
|
<meta name="description" content="multiple columns - tew-0x00">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<script defer src="/scripts/prism.js"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/prism.css" data-noprefix/>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div id="divlogoimg">
|
||
|
|
<img class="logoimg" src="/media/logo.png">
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<h3 class="title">multiple columns</h3>
|
||
|
|
<div id="divsection">
|
||
|
|
<p>Utilizing large screen estate with the help of CSS multiple columns layout allow us to increase the eye comfort of the reader by splitting longer lines of text into easier-to-read shorter lines.<br>The other option would be using shorter lines and not utilizing the screen fully, which might come into play in mobile devices with screens small enough to fit exactly one short column on them.</p>
|
||
|
|
<p><br>Below is a div splitting text into 2 columns on screens larger than 768px (usually desktop or laptop screens), melding back into a single-column layout on smaller (mobile) screens.<br>The text is justified left in this case because I like it more that way in this kind of layout. I also used a column divider called <code class="language-css">column-rule</code> in CSS to embelish the column visual a little.</p>
|
||
|
|
<div id="divmultiplecolumns">
|
||
|
|
<p>Temporibus officiis sit quo id. Excepturi eum sed sint quo aperiam accusantium quam nemo. Quibusdam non quo sed sunt nihil dolore aliquid quos.</p>
|
||
|
|
<p>Quos et ducimus distinctio similique laudantium sed. Enim nobis quasi sit sapiente qui nihil. Dolore quibusdam rem libero facilis veritatis aut animi quidem. Officia hic sunt quis et sed laudantium.</p>
|
||
|
|
<p>Et id deserunt corrupti. Voluptatem nihil at voluptatem et tempore exercitationem. Doloremque maiores dicta atque. Expedita laborum quia placeat.</p>
|
||
|
|
</div>
|
||
|
|
<div class="divcodeblock">
|
||
|
|
<pre><code class="language-css">#divmultiplecolumns {
|
||
|
|
text-align: left;
|
||
|
|
border: 2px dashed whitesmoke;
|
||
|
|
border-bottom-style: none;
|
||
|
|
border-right-style: none;
|
||
|
|
min-height: 100px;
|
||
|
|
margin: 1em 3em 2em;
|
||
|
|
padding: 1em 0 1em;
|
||
|
|
-webkit-column-count: 2;
|
||
|
|
-moz-column-count: 2;
|
||
|
|
column-count: 2;
|
||
|
|
-webkit-column-width: 100px;
|
||
|
|
-moz-column-width: 100px;
|
||
|
|
column-width: 100px;
|
||
|
|
-webkit-column-gap: .1em;
|
||
|
|
-moz-column-gap: .1em;
|
||
|
|
column-gap: .1em;
|
||
|
|
-webkit-column-rule: .1em dashed gainsboro;
|
||
|
|
-moz-column-rule: .1em dashed gainsboro;
|
||
|
|
column-rule: 1px dashed gainsboro;
|
||
|
|
}
|
||
|
|
#divmultiplecolumns p {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 768px){
|
||
|
|
#divmultiplecolumns{
|
||
|
|
-webkit-column-count: 1;
|
||
|
|
-moz-column-count: 1;
|
||
|
|
column-count: 1;
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer class="copyright">
|
||
|
|
© 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
|
||
|
|
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>
|
||
|
|
· WTFPL<br>
|
||
|
|
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|