<div>
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
Currently, item and item 1-3 are aligned to left exactly.
item
item 1
item 2
item 3
How to make it display like this:
item
item 1
item 2
item 3
You can achieve by adding css like this-
div > div{
padding-left:10px;
}
But, it will impact on application's all div. So will would be good practice to add some specific class to parent div and then add style like below -
div.my-parent-class > div{
padding-left:10px;
}
<div class="my-parent-class">
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
Use padding and margin to add spacing. You can also check the padding and margin of elements using devtools. Then look at the next option to the Styles.
To open devtools:
F12
Ctrl + Shift + I
RMB > Inspect
.pl-2 {
padding-left: 20px;
}
/* OR
.ml-2 {
margin-left: 20px;
} */
<div>
item
<div class="pl-2 ml-2">item 1</div>
<div class="pl-2 ml-2">item 2</div>
<div class="pl-2 ml-2">item 3</div>
</div>
If I am not mistaken, this is the css you're looking for.
white-space: break-spaces;
div {
white-space: break-spaces;
}
<div>
item
item 1
item 2
item 3
</div>
div > div{
padding-left:24px;
}
<div>
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
div {
white-space: break-spaces;
}
<div>
item
item 1
item 2
item 3
</div>
Related
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>
I want to make something like this:
I would like to do this with the most clean, semantic and responsive layout if is possible.
When I say clean, I refer to something like this.
<div class="gallery">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>etc...</div>
</div>
And use CSS to align, rescale and reposition the items.
PD1: Is this possible with only html+css?
PD2: Is this possible with flexbox?
Well something like that would be to make the flow vertical and allow wrapping.
*{box-sizing:border-box}
.gallery{
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
width:100%;
}
.gallery > *{
flex:0 0 1;
height:50%;
background:teal;
border:1px solid #000;
color:#fff;
padding:20px;
}
.gallery > :nth-child(5n){
height:100%;
}
<div class="gallery">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</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>
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/
I have a div with variable length lines of text in it. Right now I have something like
<div id="container" style="width: 500px">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.
Is there an easy CSS way to do this... or should I resort to using tables to lay this out?
Your html:
<div id="container">
<span>
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</span>
</div>
Your CSS:
#container {
width: 500px;
background: #eee;
text-align: center;
padding: 10px 0;
}
#container span {
display: inline-block;
background-color: #ccc;
}
#container span div {
text-align: left;
}
Demo: http://jsfiddle.net/G6ABA/
That should work:
<div id="container" style="width: 500px; text-align:center;">
<div style="text-align:left;">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
</div>
use
<span> </span>
and css
width:500px;
text-align:center;
position:absolute;
do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:
<div id="someID" style="width: auto; text-align:left;">
<div>line 1</div>
<div>line 2 is more longer</div>
<div>line 3</div>
</div>