I want to achieve the following: I have a total of 12 divs, inside one div.
Depending on the media query (tablet portrait, tablet landscape, mobile portrait, mobile landscape etc..),I want to show three columns with four divs inside or four columns with three divs inside.
This should be the end results:
3 columns, four divs per column
4 columns, three divs per column
I'm having problems with figuring out an way to achieve this with CSS only.
<div className="cb-Categorie-Wrapper">
<div className="cb-Categorie" id="categorie-Fictie"><span className="label">Fictie</span></div>
<div className="cb-Categorie" id="categorie-Thrillers-spanning" ><span className="label">Thrillers en spanning</span></div>
<div className="cb-Categorie" id="categorie-Romantiek"><span className="label">Romantiek</span></div>
<div className="cb-Categorie" id="categorie-Kinderen-YA"><span className="label">Kinderen en YA</span></div>
<div className="cb-Categorie" id="categorie-Non-fictie"><span className="label">Non-fictie</span></div>
<div className="cb-Categorie" id="categorie-Reizen"><span className="label">Reizen</span></div>
<div className="cb-Categorie" id="categorie-Mens-ontwikkeling"><span className="label">Mens en ontwikkeling</span></div>
<div className="cb-Categorie" id="categorie-Management"><span className="label">Management</span></div>
<div className="cb-Categorie" id="categorie-Educatief"><span className="label">Educatief</span></div>
<div className="cb-Categorie" id="categorie-Engels"><span className="label">Engelse boeken</span></div>
<div className="cb-Categorie" id="categorie-Anderstalig"><span className="label">Andere anderstalige boeken</span></div>
<div className="cb-Categorie" id="categorie-Non-books"><span className="label">Non-books</span></div>
</div>
I enclosed every three divs with an wrapper div that would be an block, with float:left (see picture: 4 columns, three divs per column), this made four columns next to eachother.
But now the wish is to have the columns as picture 1 (3 columns, four divs).
I am able to use Bootstrap3 if that's helpful.
.column-example {
column-count: 4;
column-rule-style: solid;
column-rule-color: #ff0000;
}
<div class="column-example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
Related
I have an array of N elements:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
I need to make two columns in following order:
If we have 10 elements:
1 6
2 7
3 8
4 9
5 10
If we have 9 elements:
1 6
2 7
3 8
4 9
5
If we have 7 elements:
1 5
2 6
3 7
4
And so on. CSS should devide elements into two columns.
The number of elements isn't a constant.
The code in react is pretty simple:
numList.map(item => (
<div>{item}</div>
))
I can devide elements array into two arrays using js and then render it as two list separatelly and make columns for it with flex.
But I wish to know if there a way to do it with CSS only without JS.
How do I make two columns with CSS?
Based on your examples, I think just a simple columns: 2 would have this functionality.
body {
display: flex;
flex-direction: column;
gap: 20px;
}
.wrapper {
columns: 2;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
You can use grid-template-columns property and specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.
Refer this: CSS Grid Layout Module
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 20px 20px;
}
For this example, I specified each column only 20px width, you can put your own numbers or auto for the width.
You can also use repeat function to repeat same pattern of column multiple of times. For example:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 50px);
}
Best way is to give class to parent div and give display as grid and in column give how many element you want in one column
.container{
display:grid;
grid-template-columns: repeat(5,1fr)}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
i'm looking for a possibility to arrange some items in a website in a 2-column list.
<div class="modal-content--dropdown">
<div class="modal-content--dropdown-header">
<h5>HEADLINE</h5>
</div>
<div style="width:50%, display: inline-block;">1</div>
<div style="width:50%, display: inline-block;">2</div>
<div style="width:50%, display: inline-block;">3</div>
<div style="width:50%; display: inline-block;">4</div>
<div style="width:50%, display: inline-block;">5</div>
<div style="width:50%, display: inline-block;">6</div>
<div style="width:50%; display: inline-block;">7</div>
</div>
if i add the items (which have 50% width and are inline), they show up in this order
1 2
3 4
5 6
7
what i am trying to achieve would be to automatically sort items like this:
1 5
2 6
3 7
4
Does anybody have an approach how i could achieve this? i know how to do that by hand, but the customer should be able to add items himself without sorting it by hand, it should happen automatically. the list will in the end be rendered alphabetically.
Thanks in advance for any tip :)
you may use column-count:
The column-count CSS property breaks an element's content into the specified number of columns.
example with ol for the demo
ol {
column-count: 2;
}
li:before {
content: 'Item';
}
<div class="modal-content--dropdown">
<div class="modal-content--dropdown-header">
<h5>HEADLINE</h5>
</div>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
This is the most insane thing I have ever written, but I believe it matches exactly the requirements. Once an overflow occurs, it moves one item to the right and continues flowing.
#list{
display: flex;
height: 80px;
writing-mode: vertical-lr;
flex-wrap: wrap;
}
#list > div{
padding: 5px;
transform: rotate(-90deg);
}
<div>
<div>
<h5>HEADLINE</h5>
</div>
<div id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
This question already has answers here:
Style every thing except first child
(4 answers)
How to skip first child?
(5 answers)
Excluding first element in CSS [duplicate]
(2 answers)
Closed 4 years ago.
I want to apply a style to all of the top-level divs within a div excluding the first one. All of attempts using not(:first-child) are recursive. How do to so?
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
.want-to-skip-first-a div:not(:first-child) {
border-top: solid red 11px;
}
Jfiddle: http://jsfiddle.net/GrAaA/85/
Thanks!
If you are just trying to apply the style to all the div tags where you have assigned the "a" class except the first one, then you just need a minor modification to your css.
.want-to-skip-first-a .a:not(:first-child) {
background-color: red;
}
you can do as j08691 suggested and just use the direct child selector (>)
.want-to-skip-first-a>div:not(:first-child) {
border-top: solid red 11px;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Or you can use the "sibling" selector (+)
.want-to-skip-first-a .a + .a{
border-top:11px solid red;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Also, i believe your CSS would work if you had specified the class name on the div
.want-to-skip-first-a div.a:not(:first-child) {
border-top: solid red 11px;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Any of these should accomplish what you need.
It's easy, you're complicating.
You just need to give the class in the div's you want that css properties.
In this case you have 6 elements, you give the class element to all of them, less than the first one
<div>
<div >1</div>
<div class='want-to-skip-first-a'>2</div>
<div class='want-to-skip-first-a'>3</div>
<div class='want-to-skip-first-a'>4</div>
<div class='want-to-skip-first-a'>5</div>
<div class='want-to-skip-first-a'>6</div>
</div>
Your Solution Is Here
I am showing one element after the other for XS and SM, but for MD I want to show one image on the left and two elements on the right column, I couldn't find a way to fit the second column under the right one. Here is what I want to do
Mobile (this is working)
----------------------
*Title*
*Description*
*Image*
*Icons*
----------------------
Now for >= MD (Not Working)
----------------------
*Image* | *Title*
| *Description*
| *Icons*
----------------------
I couldn't find a way to fit description and Icons under title. Here is my code:
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-6 col-md-push-6">
<h2>Title</h2>
<p>Data</p>
</div>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-pull-6 col-md-6 col-lg-offset-1 main-tour">
<img class="img-responsive center-block" src="https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg"/>
</div>
<div class="main-tour">
<div class="col-xs-12 col-md-5 col-lg-offset-1 items m-t-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div>
DEMO
Any ideas how this could be implemented?
here you have a jsfiddle. Use media queries for screen sizes and apply your css.
#media (min-width:420px) and (max-width:1040px){
.main-tour{
float:left;
}
.row .first, .row .main-tour{
display:inline-block;
}
.main-tour.description{
display:block;
float:none;
}
}
I am using w3.css. So you need this in your header:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
I want to have a twothird container (coloured green so it is easy to see it), centered in the middle of the page, but with the internal text of the twothird container appearing on the left of the container. Ie the green area is central in the white page, but the text is on the left of the green area.
This does not work (it just appears on the left):
<div class="w3-container w3-center">
<div class="w3-container w3-twothird w3-left w3-green">
Some profound utterance.
</div>
</div>
Edit:
This is the solution based on the idea presented by albydamed.
<div class="w3-row">
<div class="w3-col w3-container s0 m1 l1"></div>
<div class="w3-col w3-container s12 m10 l10 w3-green" style="text-align: left;">
Some profound utterance
</div>
<div class="w3-col w3-container s0 m1 l1"></div>
</div>
In the above 's' refers to small screens (phones), 'm' refers to medium screens (tablets) and 'l' refers to large screens. <div class="w3-row"> is the containing div for 3 column divs. In each of s, m and l the sum of the internal columns must add to 12, as the screen is split into 12 invisible columns.
In my 'm' and 'l' case I split the 3-columns 1-10-1 (must always add to 12). So my middle div takes up 10/12 of the screen width. However, in my 's' case I split it 0-12-0, instructing my middle column to take up the full width of the phone.
Apply css to the text inside your container.
CSS:
.left {
text-align: left;
}
HTML:
<div class="w3-container w3-center">
<div class="w3-container w3-twothird w3-green">
<p class="left">Some profound utterance.</p>
</div>
</div>
Although, if you really want it centered I would remove w3-two-third. That restricts where it is placed. I would recommend a more responsive design like this:
<div class="w3-row">
<div class="w3-container w3-quarter"></div>
<div class="w3-container w3-green w3-half">
<p class="left">Some profound utterance.</p>
</div>
<div class="w3-container w3-quarter"></div>
</div>
The classes have to be changed slightly for the text alignment, and you'll need to add a class with the "!important" tag following width or, in this example, inline style:
<div class="w3-content">
<div class="w3-container w3-twothird w3-green" style="float: none; margin: 0 auto; width: 66.67% !important;">
Some profound utterance.
</div>
</div>
JsFiddle