Can CSS be used to dynamically fill columns in a way that each additional column is added on the left side of a full one? e.g.
----------
| 4 | 1 |
| | 2 |
| | 3 |
----------
I've seen the webkit-columns properties, but they align from left to right.
Appreciate any help!
To achieve a right-to-left layout, you can use the CSS property direction: rtl; on the columns container and set the opposite value for the inner elements.
Check out this example on Codepen : http://codepen.io/anon/pen/bdxKbw
Here is the markup:
<main>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</main>
The corresponding CSS styles are as follows:
main {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
height : 600px;
direction : rtl;
}
p {
direction : ltr;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
height : 150px;
margin : 0 0 2em 0;
padding : 0;
border : 1px #ccc dashed;
}
Here's the result of the layout (tested on Chrome):
If you want to achieve the same effect, you can also utilize display: flex; along with the flex-wrap: wrap-reverse; property. Make sure to confirm browser compatibility before implementing this solution.
Additionally, take a look at this valuable flexbox guide for further insights and details on how to use flexbox effectively.
For instance:
.flex-wrap {
display: flex;
flex-wrap: wrap-reverse;
flex-direction: column;
height: 150px;
width: 250px;
border: 1px solid black;
}
.flex-item {
height: 48px;
text-align: center;
border: 1px dotted black;
}<div class="flex-wrap">
<div class="flex-item"><p>1</p></div>
<div class="flex-item"><p>2</p></div>
<div class="flex-item"><p>3</p></div>
<div class="flex-item"><p>4</p></div>
</div>How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...
I currently have a label that changes to display the selected option from a dynamic select dropdown, but it only updates when the selection is changed. I would like it to also display the current value when the page first loads. I attempted to change &apos ...
my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...
Is there a way to line up the bullets with the left margin of the text above the list? Here's an example: <html> <style> ul.p1 {padding-left: 40px} ul.p2 {padding-left: 0px} </style> <body> <h2&g ...
I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...
When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...
Hi everyone, I'm currently in the process of constructing a website with Magento. However, I've encountered some issues after trying to install a theme. It seems like certain files, including CSS, are not loading properly. To provide better conte ...
I'm looking for a way to set up my menu in the header using "include/header.php" and have it so that when I click on a link, it takes me to that page while also changing colors to indicate it's active. Would jQuery or PHP be more suitable for thi ...
I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...
I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...
I am currently testing a HTML5 webpage on my iPhone, utilizing CSS3 as well. The page appears centered in all browsers except for the iPhone, where it is left aligned. I have attempted to use the following viewport meta tag: <meta name="viewport" conte ...
There are 2 major concerns I have regarding this layout : .feature_content (with a grey background) does not adjust its height and width to different screen sizes. Currently, on large screens, .feature_content is positioned far from the footer. There is ...
Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...
This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...
What is the best way to make emails responsive in a php application when external css files are not supported and media queries cannot be included inline? Looking for alternatives to make emails responsive without external css files and media queries, any ...
Recently, I've transitioned to using PostCSS exclusively with Webpack. As I explore the functionalities of using postcss-import to inline external stylesheets, I'm noticing that its options offer the ability to configure plugins and transformers ...
Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...
After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...
I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...
I recently started using Bootstrap 4 and have structured my menu in the following way: <ul class="navbar-nav mx-auto justify-content-center"> <li class="nav-item"> <a class="nav-link" href="index.php">HOME</a> </ ...