Is there a way to create CSS rules to display articles in three columns, like the example shown in the image below? The preferred HTML markup is:
<div>1</div>
<div>2</div>
<div>3</div>
...
<div>6</div>
The only requirement is to avoid any additional manipulations with the HTML markup during rendering - no nested blocks or anything similar. Any suggestions?
You can view the code on JSFiddle here: jsfiddle.net/3nv7rkcg
Creating a dynamic layout using CSS can be quite challenging. It is recommended to utilize JavaScript instead. Check out for a better solution.
However, now it is also possible to achieve similar results using CSS :)
Below is the sample code:
@import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
article {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: #efefef;
}
p {
margin: 1rem 0;
}
/* Additional styles for background color and other properties (not essential for functionality) */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
</section>
<section>
<p>Lorem ipsum dolor sit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</section>
</article>Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...
.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...
Can I integrate a TTF font (like Arial) into my Android app so that it can be accessed by a externally loaded webpage's CSS? For instance, imagine my website is and its CSS file contains the following: @font-face { font-family: "CustomArial"; ...
let array = [{ query:{ q1 : 123, q2 : 44 } }]; Despite attempting to use a forEach loop, no results were returned. ...
I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...
How can I display a short message next to a textarea when it is clicked? Below is the code that needs modification: <textarea id="txt" ></textarea> and : $('#txt').click(function(){ // What should be added here to show a dialog bo ...
Despite following the steps, my scrollspy is not highlighting. What could be the issue? I have replicated the HTML and CSS codes directly from getbootstrap.com. <!DOCTYPE html> <html lang="en"> <head> <meta charset="u ...
Currently, I am utilizing the Jquery load function to refresh specific parts of a webpage. The page loaded by the load function only displays content in the div if certain database parameters are satisfied. However, my issue is that when new content is ren ...
Check out the code snippet below: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/cs ...
My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...
I am currently attempting to determine the coordinates where the ray caster intersects with the a-sky element. However, I am facing two main issues: 1) The ray caster is not visible even after adding showline:true 2) The intersection listener is never ...
I'm having an issue with my responsive navigation in Bootstrap. When I resize the window, the navigation transforms to allow content expansion. However, I've noticed that when I expand the content, the lines, background color, and logo start to l ...
Here are some options to consider: <pre> ... </pre> or you could also use style="white-space:pre" Are there any other possibilities we should explore? ...
Looking to create a function that can toggle GPS on and off for both iPhone and Android devices ...
Whenever I attempt to run this code, an error pops up. My goal is to extract data from multiple pages. However, when executing the script below, I encounter the following error message: Error in eval_tidy (xs [[j]], mask): object 'titles' not f ...
I have an HTML document and I am loading a script inside it like this: <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorX ...
Currently, I have an HTML table that is structured in the following way: <div class="timecard"> <h3>tommytest</h3> <table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;"> < ...
Despite the abundance of questions on this topic, I have yet to find a viable solution. Here is my HTML code: <div class="row"> <div class="col-xs-12"> <div class="row print-break"> <div class="col-xs-8 col-xs-offset ...
Looking for help to store 5 unknown numbers in an array and then display them after the user has entered all 5 numbers. Can anyone assist me in creating an array of size 5 and using a for loop to show the numbers? Here is the code I currently have: ...
I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...