<div class="scene">
<div class="panel">
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/9bd/rusted-fence-decay-texture-1199916.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/6a8/texas-fence-1314647.jpg"
alt=""
/>
<h3>
Lackierwalzen&
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/13e/blue-sky-sea-1379815.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/59d/summer-landscape-1365683.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/c85/farm-road-1395238.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/4b6/the-road-1361700.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/b9c/street-1234360.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/e75/stockholm-1447592.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/922/stockholm-by-night-1188195.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/d31/stockholm-1226244.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/615/corcovado-sunset-1527899.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
<a class="card" href="#">
<img
src="https://images.freeimages.com/images/large-previews/432/corcovado-sunset-2-1527900.jpg"
alt=""
/>
<h3>
Lackierwalzen
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy.
</p>
</a>
</div>
</div>
.scene {
padding: 20px;
perspective: 400px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
width: 1000px;
margin: 0 auto;
}
.panel {
width: 420px;
height: 520px;
transform-style: preserve-3d;
transition: transform 0.5s;
transform-origin: 50% 50% -1280.8427124746px;
background: pink;
animation: rotateAnim 10s linear infinite;
}
.card {
position: absolute;
width: 100%;
}
img {
width: 420px;
height: 400px;
}
.card:not(:first-of-type) {
position: absolute;
left: 0;
right: 0;
transform-origin: 50% 50% -1280.8427124746px;
transform-origin: -ms-50% 50% -1280.8427124746px;
transform-origin: -webkit-50% 50% -1280.8427124746px;
transform-origin: -moz-50% 50% -1280.8427124746px;
transform-origin: -o-50% 50% -1280.8427124746px;
}
.card:nth-child(2) {
transform: rotateY(0.5235987756rad);
transform: -ms-rotateY(0.5235987756rad);
transform: -webkit-rotateY(0.5235987756rad);
transform: -moz-rotateY(0.5235987756rad);
transform: -o-rotateY(0.5235987756rad);
background: white;
}
.card:nth-child(3) {
transform: rotateY(1.0471975512rad);
transform: -ms-rotateY(1.0471975512rad);
transform: -webkit-rotateY(1.0471975512rad);
transform: -moz-rotateY(1.0471975512rad);
transform: -o-rotateY(1.0471975512rad);
background: white;
}
.card:nth-child(4) {
transform: rotateY(1.5707963268rad);
transform: -ms-rotateY(1.5707963268rad);
transform: -webkit-rotateY(1.5707963268rad);
transform: -moz-rotateY(1.5707963268rad);
transform: -o-rotateY(1.5707963268rad);
background: white;
}
.card:nth-child(5) {
transform: rotateY(2.0943951024rad);
transform: -ms-rotateY(2.0943951024rad);
transform: -webkit-rotateY(2.0943951024rad);
transform: -moz-rotateY(2.0943951024rad);
transform: -o-rotateY(2.0943951024rad);
background: white;
}
.card:nth-child(6) {
transform: rotateY(2.617993878rad);
transform: -ms-rotateY(2.617993878rad);
transform: -webkit-rotateY(2.617993878rad);
transform: -moz-rotateY(2.617993878rad);
transform: -o-rotateY(2.617993878rad);
background: white;
}
.card:nth-child(7) {
transform: rotateY(3.1415926536rad);
transform: -ms-rotateY(3.1415926536rad);
transform: -webkit-rotateY(3.1415926536rad);
transform: -moz-rotateY(3.1415926536rad);
transform: -o-rotateY(3.1415926536rad);
background: white;
}
.card:nth-child(8) {
transform: rotateY(3.6651914292rad);
transform: -ms-rotateY(3.6651914292rad);
transform: -webkit-rotateY(3.6651914292rad);
transform: -moz-rotateY(3.6651914292rad);
transform: -o-rotateY(3.6651914292rad);
background: white;
}
.card:nth-child(9) {
transform: rotateY(4.1887902048rad);
transform: -ms-rotateY(4.1887902048rad);
transform: -webkit-rotateY(4.1887902048rad);
transform: -moz-rotateY(4.1887902048rad);
transform: -o-rotateY(4.1887902048rad);
background: white;
}
.card:nth-child(10) {
transform: rotateY(4.7123889804rad);
transform: -ms-rotateY(4.7123889804rad);
transform: -webkit-rotateY(4.7123889804rad);
transform: -moz-rotateY(4.7123889804rad);
transform: -o-rotateY(4.7123889804rad);
background: white;
}
.card:nth-child(11) {
transform: rotateY(5.235987756rad);
transform: -ms-rotateY(5.235987756rad);
transform: -webkit-rotateY(5.235987756rad);
transform: -moz-rotateY(5.235987756rad);
transform: -o-rotateY(5.235987756rad);
background: white;
}
.card:nth-child(12) {
transform: rotateY(5.7595865316rad);
transform: -ms-rotateY(5.7595865316rad);
transform: -webkit-rotateY(5.7595865316rad);
transform: -moz-rotateY(5.7595865316rad);
transform: -o-rotateY(5.7595865316rad);
background: white;
}
I have created a 3d transformation of images rotating 360degree, but when i open it in safari browser it's rotating on taking a particular point(i.e the 7th child) of axis, rather being rotating in a circular motion.
This code is working fine on chrome browser, but it's not getting displayed the same on safari browser. Any help would be appreciated!
Related
I'm trying to create a grid with three columns where the first column should be as wide as possible, except if there is text in the two other columns that could fill the space.
This is my working code:
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
grid-template-columns: 1fr max-content max-content;
gap: 10px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100px;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<h2>Grid 2</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
In the case of "Grid 1", I would like the first column to only be as wide as it needs to be. I.e. I want to be able to see more text in column two and three.
In the case of "Grid 2", I would like the last two columns to have a maximum width of, lets say 100 px, or preferably, the width of the text of Column 2 and Column 3, respectively. Then I want the first column to fill the remaining space (basically as it looks now).
EDIT: Grid 1 and 2 are just examples of the same grid, I don't want two different stylings.
Is this getting close?
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
gap: 10px;
}
.g1 {
grid-template-columns: auto auto auto;
}
.g2 {
grid-template-columns: auto 100px 100px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper g1">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<br>
<br>
<h2>Grid 2</h2>
<div class="grid-wrapper g2">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
I removed max-width: 100px and used
grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr)
which is close enough to what I wanted.
The problem is that when I use display inline-block it doesn't move all the boxes at once on a mobile screen (It has 3 boxes called "single-facilities"). The thing is that they move one at a time. I'm using display inline-block on media screen.
HTML:
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
</div><!--box-facilities-->
CSS:
.box-facilities{
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities{
display: inline-block;
}
.img-facilities{
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities{
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px){
.box-facilities{
display: inline-block;
}
}
You can just change the direction to column as
flex-direction: column;
.box-facilities {
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities {
display: inline-block;
}
.img-facilities {
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities {
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px) {
.box-facilities {
/* display: inline-block; */
flex-direction: column;
}
}
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
</div>
<!--box-facilities-->
Here's what I have so far:
.card {
padding: 1rem;
height: auto;
}
.cards {
max-width: 640px;
margin: 0 auto;
display: grid;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
#media (min-width: 768px) {
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
On desktop view it is fine but on smaller views like mobile, I'd like to stack the title and description close together, so the gap between title and description close together but the gap of each row stays the same. Like so:
What's the best way to achieve this? Is grid the right way to approach this?
You can do like this:
Only use display: grid; on desktop, and then use a margin-bottom for controlling the space. 😊
.cards {
max-width: 640px;
margin: 0 auto;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-bottom: 2rem;
}
#media (min-width: 768px) {
.cards {
display: grid;
}
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
I have 3 components in a row and I want their buttons be aligned at the bottom of containers. However each container has different text so it's height is not fixed and we don't want to strict the height.
How can I achieve alignment of the containers only by css and compatible with IE9 as well?
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.button-link{
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
http://codepen.io/neginbasiri/pen/mPYzKx
Same height is not necessary to make this done)
Just set position relative on outermost parent and set position: absolute with only bottom: 0 for your button without specifying left and right.
.container-of-3 {
position: relative;
padding-bottom: 40px;
overflow: hidden;
}
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.div-content {
text-align: center;
}
.button-holder {
width: 33.33333333333%;
position: absolute;
text-align: center;
bottom: 0;
}
.button-link{
background-color: #69be28;
display: inline-block;
vertical-align: top;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
You can use display: table for the container and display: table-cell for the three columns, this way they are all the same height. Then fix the button to the bottom and you're done :)
.container-of-3 {
display: table;
}
.container-of-3 > div{
width: 33.33333333333%;
display:table-cell;
height: 100%;
padding-bottom: 20px;
position: relative;
}
check out this fiddle: https://jsfiddle.net/br6c5way/
Floats will not really help you here since they don't match heights. You'll want to change the divs to a table table cell approach. Then position absolute the buttons so they are always aligned the same. Since Firefox 30 or so all browsers handle position relative on table cell elements. The positioning below aren't exact so you'll want to try out different amounts of padding and positioning that work for you.
.container-of-3 {
display:table;
table-layout: fixed;
width:100%
> div {
display: table-cell;
position: relative;
vertical-align:top;
padding-bottom:50px;
> img{
margin-left: calc((100% - 90px)/2);
}
}
}
.button-link{
position: absolute;
bottom: 10px;
left: 0;
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
I have a #comments element which contains .comment elements. I would like to have 5 vertical lines from left to right, each 1px in width, 100% height (till the end of the #comments element), with 20px between them and without images. I tried to do that myself, but my CSS-fu isn't that high. Any help would be much appreciated.
HTML:
<div id="comments">
<div class="comment level1">Lorem ipsum dolor sit amet</div>
<div class="comment level2">Lorem ipsum dolor sit amet</div>
<div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>
CSS:
#comments {
width: 400px;
border: 1px solid black;
}
.comment {
margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
Demo.
Here's how I imagine it:
|[comment ]
| |[comment ]
| |[comment ]
| | |[comment]
Is there some reason you need to have all the divs as direct children of the outer parent div? If you nest the divs you can accomplish this very easily:
css:
div div {
border-left: 1px solid black;
padding-left:20px;
}
nested html
<div id="comments">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
</div>
updated fiddle showing how it would look here nested down to 5 levels:
http://jsfiddle.net/webchemist/tuZB6/4/