Looking to split a list into 2 columns, displayed vertically rather than horizontally. Currently achieved with the CSS:
li {
float: left;
width: 50%;
}
However, I need all elements past the 5th child to float right. Something like:
li {
float: left;
width: 50%;
}
li:nth-child(5):after {
float: right;
}
Is it possible to achieve this layout using only CSS?
To alter the order of flex items, you can utilize the display:flex and order properties. The order property, which is part of the Flexible Box Layout module, allows for changing the default display order of flex items. Take a look at the snippet below, it works similarly to OP:
ul {
margin:0;
padding:0;
display: flex;
flex-flow: row wrap;
}
ul li {
width:50%;
display:block;
}
ul li:nth-child(1){
order: 1;
width: 50%;
}
ul li:nth-child(2) {
order: 3;
width: 50%;
}
ul li:nth-child(3){
order: 5;
width: 50%;
}
ul li:nth-child(4) {
order: 7;
width: 50%;
}
ul li:nth-child(5){
order: 2;
width: 50%;
}
ul li:nth-child(6) {
order: 4;
width: 50%;
}
ul li:nth-child(7){
order: 6;
width: 50%;
}
ul li:nth-child(8) {
order: 8;
width: 50%;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>Utilizing CSS3 for columns is a game-changer! The beauty of using columns in responsive designs is the simplicity of adjusting the count.
li {
text-align: center;
list-style-type: none;
}
div {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 5px; /* Chrome, Safari, Opera */
-moz-column-gap: 5px; /* Firefox */
column-gap: 5px;
width: 49px;
}<div>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</div>No need for complicated floats or changing display types - this method is compatible with almost all modern browsers. Check out this resource from W3 Schools to learn more.
Looking for an nth calculator online? Easily calculate 'nth' values based on your specific requirements by simply inputting the numbers.
Take a look at
For example, for your current needs: :nth-child(n+5)
I've been struggling to find a solution with my code provided below. Despite multiple attempts, the issue remains unresolved. import React from "react"; import { gridPageCountSelector, gridPageSelector, gridPageSizeSelector, useGridA ...
I'm currently working on creating a form using vuetify that closely resembles the one shown in this image: https://i.sstatic.net/4h6YM.png After experimenting with vuetify grid and columns, I've managed to achieve something similar to this: http ...
I am working on aligning an image and a button next to each other so that the image slightly overlaps the button. However, I have noticed that in doing so, the button becomes unclickable. .button{z-index:-1!important;} .image{z-index:1!important;} Any s ...
After successfully generating DATA from PHP into an HTML table format, I utilized the code below to export it to EXCEL: header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment;filename="BASIC_Data.xls"&apos ...
Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...
Seeking help with using html5 geolocation this.getCurrentLocation = function(callback) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (pos) { callback({ 'la ...
How can I set a maximum value for an input that can be either a numeric amount or a percentage? Is it possible to use ng-max to set the max value to 100 if the input is a percentage, and leave it blank if it's a numeric amount? I attempted the follo ...
Currently, I have implemented the following CSS: .entry a { padding: 2px 0 0 8px; background: transparent url(images/link_arrow_light.gif) left top no-repeat; text-decoration: underline; } It is functioning correctly, but the image is being added t ...
Trying to insert a red * at the end of my input field using bootstrap, but all my attempts so far have been unsuccessful. Is there a way to align the Currently experiencing this issue: https://i.stack.imgur.com/61pzb.png Code snippet: .required-after ...
I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...
Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...
Utilizing twitter-bootstrap for styling, I have implemented a login form and am attempting to center it on the page. Most suggestions on stackoverflow advise placing elements inside the container class, which is what I have done. The requirement is for t ...
I am facing an issue with displaying an account number that exceeds 100 characters. I need to restrict the display with overflow hidden while still being able to show the full account number using a tooltip. Below is the code snippet: <span class="tex ...
For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...
I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...
I'm currently working on developing a vertical stepper component using html & css with inspiration from this design. However, I've encountered some alignment issues in the css that I'm struggling to resolve. CSS .steps-container .step::b ...
I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...
Running bootstrap on React and using Storybook to view it has been a smooth process until today. The code that worked flawlessly on Friday is suddenly not working at all. Despite trying it on Jsfiddle and onecompiler, the carousel component copied from the ...
Here's the issue I'm facing: I have an HTML <table> with a fixed height of 100px and no border. Inside this table, there is one row (with a 100% height) containing 5 td elements (each also with a height of 100%). Within each td, there is a ...
This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...