now I have such code, use bootstrap 2
<div class="row-fluid">
<div class="span4">Some text 1</div>
<div class="span4">Some text 2</div>
<div class="span4">Some text 3</div>
</div>
<div class="row-fluid">
<div class="span4">Some text 4</div>
<div class="span4">Some text 5</div>
<div class="span4">Some text 6</div>
</div>
Can I get 3 rows in 2 columns each without code change?
3 columns and 2 rows I use for desktop, and need 2 columns and 3 rows in mobile devices
I have found it
http://jsfiddle.net/gkZKq/
You could do:
.row-fluid { display: inline-block; width: 50%; float: left; }
.row-fluid [class*="span"] { float: none; margin-left: 0; }
http://jsfiddle.net/thespacebean/mDVfd/
Related
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
I have trouble with 5 div elements to make it responsive.
I have this this div elements like this:
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
The style CSS like this:
.AllCont {
display: table;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
display: table-cell;
width: 20%;
}
And trying to do it responsive with this in CSS:
#media only screen and (max-width:1540px) {
.ContQuint {
display: table-row;
}
}
But i dontk want that. I want something like this:
| Elem 1 - Elem 2 - Elem 3 - Elem 4 - Elem 5 |
Then when the screen size decreases a little bit I want this:
| Elem 1 - Elem 2 - Elem 3 - Elem 4 |
| Elem 5 |
Then when decreases more:
| Elem 1 - Elem 2 - Elem 3 |
| Elem 4 - Elem 5 |
Then a little more:
| Elem1 - Elem 2 |
| Elem 3 - Elem 4 |
| Elem 5 |
And Finally:
| Elem 1 |
| Elem 2 |
| Elem 3 |
| Elem 4 |
| Elem 5 |
How can i do that with CSS or javascript?
I think what you're looking for is display: inline-block;! Plus display: block on the parent .AllCont element. Tables used to be useful for this kind of layout, but these days you'll have a better time checking flexbox (or even CSS grid) for something more sophisticated.
Should probabliy take a look into responsive layout, this will help you a lot understanding different patterns.
Responsive patterns by google
Either way i recommend the use of flexboxes or inline/block elements.
Solution using flexboxes :
.AllCont {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
width: 200px;
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
Solution using inline and block elements
.AllCont {
display: block;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
display: inline-block;
width: 200px;
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
Hope this helps :)
Rather than giving a % width for .ContQuint, give a fixed width. otherwise the width reduces with screen width.
fiddle showing it
.ContQuint {
display: inline-block;
width: 150px;
}
Flexbox does this with flex-wrap: wrap;
.AllCont {
display: flex;
flex-wrap: wrap;
}
.ContQuint {
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
You may use flex, width + flex-wrap and min-width to spare a mediaquerie.
.AllCont {
display: flex;
flex-wrap: wrap;
}
.ContQuint {
width: 20%;
/* optionnal*/
min-width: 300px;/* this is alike your breaking point ... each 300px or else value you set */
padding: 1px;
box-sizing:border-box;
}
img {
/* optionnal*/
display: block;
width: 100%;
}
<div class="AllCont">
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200">
</div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
</div>
pen to play with
I don't know if this is possible with flex but what i need is a list with two items side by side and the width per item depends on the content. Like here:
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
align-self: flex-end;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) {
background-color: darkgrey;
}
How can i realise that always two items are side by side no matter how many li items i have? There is no outer container that limits the width. I don't want to use float. Is there a flexible solution with grid template columns?
Final result like this (but aligned to the right):
In addition to theAlexandrian's answer, and if you can add an inner wrapper, here is an option, where you use the inner div, displayed as inline-block, for styling, e.g. padding etc.
Since we deal with inline elements, they, like characters, can have a space between them. One way is to take it out using a negative margin, and here is a few more options:
How do I remove the space between inline-block elements?
Note, since the space width is based on the font, the negative margin might need an adjustment.
Stack snippet
.items {
text-align: right;
}
.item {
display: inline;
margin-right: -4px; /* take out inline element space */
}
.item div {
display: inline-block;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) div {
background-color: darkgrey;
}
.item:nth-child(even)::after {
content: '\A';
white-space: pre;
}
<div class="items">
<div class="item"><div> Item 1 with text </div></div>
<div class="item"><div> Item 2 with more text </div></div>
<div class="item"><div> Item 3 with some text </div></div>
<div class="item"><div> Item 4 without text </div></div>
<div class="item"><div> Item 5 lorem </div></div>
<div class="item"><div> Item 6 ipsum </div></div>
<div class="item"><div> Item 7 with lorem </div></div>
<div class="item"><div> Item 8 with ipsum </div></div>
</div>
If float is forbidden, I do have a simple solution for you! :)
We will use inline, block, :nth-child and ::after.
There we go:
.item {
display: inline;
}
.item:nth-child(2n)::after {
display: block;
content: '';
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
Simple, isn't it?
Have you tried css columns?
.items {
columns: 2
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>
Below, how can I add vertical whitespace where it says "increase spacing". line-height would affect the entire right box, but I want addidional whitespace only when a line inside right runs over and breaks.
See http://jsfiddle.net/dhT8E/
<div class="box">
<div class="item">
<div class="left">Left Text 1</div>
<div class="right">Right Text 1</div>
</div>
<div class="item">
<div class="left">Left Text 2</div>
<div class="right">
<div class="horizontal">Stacked Box 1</div>
<div class="horizontal">Stacked Box 2</div>
<div class="horizontal">Stacked Box 3</div>
</div>
</div>
<div class="item">
<div class="left">Left Text 3</div>
<div class="right">Right Text 2</div>
</div>
</div>
.box {width:350px; height:150px; border:solid}
.item {padding-bottom:8px;}
.left {position:absolute;}
.right {padding-left:100px; padding-after:20px;}
.horizontal {display: inline-block; padding-right: 20px}
line-height is what you need.
.box {
line-height: 26px; /* adjust to your needs */
}
True,
line-height would affect the entire right box
... but to fix that up - just remove / change the bottom padding on your items.
FIDDLE
If I understand correctly, you're looking for some sort of conditional line-height? When a box contains more than two lines the line-height of those lines should be increased, but all single-line texts should remain unchanged?
I think you should approach the problem from another angle. A possible solution is to increase the default line height, affecting all text, and then correcting the single lines with a negative margin or reduced padding.
For example, if you want a line-height of 20px for single lines, and a line-height of 30px for multiple lines, set the line-height on 30px and a negative margin (or reduced padding) of 10px on the box itself.
<p>Single line</p>
<p>Multiple lines with<br />increased spacing</p>
<p>Single line</p>
<p>Single line</p>
p {
font-size: 16px;
line-height: 30px;
margin: -5px 0;
padding: 0;
}
Working example # http://jsfiddle.net/xw3af/
My proposed answer is to apply padding-bottom on .left, .right and .horizontal but UNDO the padding-bottom on those .right and .left that contain a .horizontal. I use .nodrop to do this. Empty .left and .right can be managed with a min-height.
http://jsfiddle.net/dhT8E/
HTML:
<div class="box">
<div class="item">
<div class="left">Left Text 1</div>
<div class="right">Right Text 1</div>
</div>
<div class="item">
<div class="left">Left Text 2</div>
<div class="right nodrop">
<div class="horizontal">Stacked Box 1</div>
<div class="horizontal">Stacked Box 2</div>
<div class="horizontal">Stacked Box 3</div>
</div>
</div>
<div class="item">
<div class="left">Left Text 3</div>
<div class="right">Right Text 2</div>
</div>
</div>
CSS:
.box {width:350px; height:150px; border:solid}
.left {position:absolute;}
.right{padding-left:100px; padding-after:20px;}
.left, .right { padding-bottom: 8px; }
.horizontal{display: inline-block; padding-right: 20px; padding-bottom: 8px; }
.item .nodrop { padding-bottom: 2px; }