My elements are floated with a width of 20%, resulting in 5 elements per line.
The current arrangement looks like this:
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
Now, I want to reorganize them vertically as follows:
1 4 7 10 13
2 5 8 11 14
3 6 9 12 15
I'm unsure how to achieve this layout. Can it be done with CSS alone or do I need PHP or JS?
Learn how to implement multiple column layouts using CSS3.
.container {
width: 100px;
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}<div class="container">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
</div>You can also achieve the desired layout using CSS3 flexbox.
.container {
width: 100px;
height: 60px; /*20x3*/
display: flex;
flex-flow: column wrap;
}
.container span {
flex: 0 0 20px;
}<div class="container">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span>
</div>Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...
Why is the background image not showing up on my website? The img src is also not displaying. All pictures show up fine on Chrome desktop browser, but not on Chrome mobile browser. Other browsers that are not displaying the images include Safari mobile, I ...
Our website features a unique scrolling functionality where it starts off vertically and then switches to horizontal once the user reaches the bottom. This allows for a seamless transition between scrolling directions. In addition, users can easily naviga ...
Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...
I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them. However, my requirements have made this problem more complicated to solve... What I would ...
How can I utilize push and pull in Bootstrap version 5.0.0-beta2? In Bootstrap 3, my code looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <d ...
I am facing an issue where the height:100% property is not working to fill the remaining area on the screen. A red outlined area represents the border radius, while the highlighted yellow space should have been filled: https://i.stack.imgur.com/ZQNkw.png ...
My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet: <label for="accountBrokerageName">Brokerage:</label> <se ...
I have successfully implemented draggable li-elements and droppable boxes using jQuery UI. Here is my structure: A list of 3 different permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edi ...
I've been trying to automate the population of three dropdown selection elements using a Chrome extension. I'm able to change the value of the first dropdown, but it doesn't trigger the necessary action that populates the second and third dr ...
Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...
Is there a straightforward method to dynamically alter an HTML attribute? I've used Angular's scope variable and ng-hide to hide a div, but the size of the div remains unchanged. How can I adjust the size of that particular div? I attempted th ...
I've implemented the Auth library in my Vue/Nuxt project and have successfully set up JWT Authentication. However, I'm encountering an issue with the refresh token. The refreshToken cookie is consistently being set to null: https://i.sstatic.ne ...
Hi there! I am struggling to resize the logo in the header of my website www.cookingvinyls.com. Despite my efforts, I can't seem to override the hardcoded version. I attempted to modify the width and height lines in header.php, but unfortunately, it ...
One thing I'm considering is the process of dynamically changing element names in the DOM with JavaScript or jQuery when adding or removing child elements. For instance, if I decide to delete the second text box from a form that originally has three t ...
Here I have set up two different animations. animations: [ trigger('fadeIn', [ transition('void => *', [ style({opacity: 0}), animate(500), ]), ]), trigger('fallIn',[ transition ...
When I type !, it should show up like in the image. However, it's not working. Could it be because Visual Studio Code got an update? Or did I make a mistake on my end? I found a workaround by using html:5, but I'm still curious to know if this ...
Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...
If I have a Json File structured like this: {"403": [ { "403-01-01": "219,00" }, { "403-01-02": "180,00" } ], "404": [ { "404-01-01": "26,00" }, {"403-01-02": " ...
When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...