How to create new line with css or javascript?

Question

For example, if I have n images, and I want to arrange every 4 images in a row, is there any way to do that in CSS or js? Because the images are dynamically uploaded with AJAX, I think I need a dynamical way.

Are the images fixed-width? Can you simply inject a <br> after each 4th image via JS? — Phrogz
– Phrogz, Commented Mar 28, 2013 at 5:16

He Hui · Accepted Answer · 2013-03-29 02:06:21Z

3

A little more sophisicated answer using CSS3

HTML

<div class="image_row">
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
</div>

Style .image_row { width:400px; }

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

Solves your dynamic width/height, and puts all 4 images into a row.

http://jsfiddle.net/gAWyU/

Edit: As requested, added the mozilla and standard codes in.

Update Just a little update to this answer. The amazing thing about the css3 calc function is that your container div can be of any size. I've used 400px in this example, but if you want to make it fluid, using my solution, it works too.

This is because, in my solution, the width of the image will always be 1/4 of the width of the parent div.

If you're afraid that your images will be too in width, what you could potentially do instead is set a fixed minimum width, and set the max-width to match the parent div. Here's a working example:

Fiddle

Note that you'll only need to set a minimum width for the parent div; as the images will ALWAYS be 1/4 of the width of your parent div.

Here's the CSS:

.image_row
{
    width:100%;
    min-width:400px;
}

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

edited Mar 29, 2013 at 2:06

answered Mar 28, 2013 at 5:29

He Hui

2,2365 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karol Over a year ago

It works only for webkit browsers - am I right? So there needs to be some other fix for FireFox as well. Anyway it's another way to do it, so +1.

Karol Over a year ago

Fully agree - but you probably know that some people will just copy your answer without thinking - so now you helped them.

David Gilbertson · Accepted Answer · 2013-03-28 05:42:14Z

3

You can do it with no changes to the HTML or JS.

#myDiv img{
    display:block;
    float:left;
    width: 100px;
    height: 100px;
    border: 1px solid white;
}
#myDiv img:nth-child(4n+1){
    clear:left;
}

nth-child(4n+1) means applying those rules (clear:left) to every fourth image, but starting at position 1.

answered Mar 28, 2013 at 5:42

David Gilbertson

4,9341 gold badge32 silver badges34 bronze badges

Comments

Karol · Accepted Answer · 2013-03-28 05:13:14Z

1

Add a div, and set it's width (in CSS) to suit 4 images in the row. They will stack automatically. Something like this:

<div style="width: 400px">
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
</div>

answered Mar 28, 2013 at 5:13

Karol

8,09313 gold badges51 silver badges68 bronze badges

5 Comments

Phrogz Over a year ago

Or just add 4 images per dynamically-created <div>.

Karol Over a year ago

Yeah... there are a lot of ways to achieve this goal.

FelipeAls Over a year ago

Did you mean <div style="width: 416px"> (more or less) ;) Or floating images.

Karol Over a year ago

If it doesnt work for you, then you probably have some default margins or paddings attached. Can you check? It works perfectly in my chrome without float. But yeah - float is another option as well :)

He Hui Over a year ago

check my answer. A little more dynamism allowed.

ManZzup · Accepted Answer · 2013-03-28 05:21:54Z

0

define a new block of div and inside it another 4 blocks of fixed width div's

<div class="image-container">
      <div style="width:100px" id="1"></div>
      <div style="width:100px" id="2"></div>
      <div style="width:100px" id="3"></div>
      <div style="width:100px" id="4"></div>
</div>

now append your images inside of each div, so regardless of the width of the image there will be only 4 images per row

answered Mar 28, 2013 at 5:21

ManZzup

5364 silver badges12 bronze badges

2 Comments

He Hui Over a year ago

this code MIGHT break when the images are bigger than the div. Either that of the images will be truncated

ManZzup Over a year ago

yup images will be truncated to suite the width of the div but it would be more practical than forcing all the images to have a constant width

Parthik Gosar · Accepted Answer · 2013-03-28 05:32:34Z

0

You can easily do it through float property of css

<div style="/*total width of your 4 images placed side by side*/">
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
</div>

answered Mar 28, 2013 at 5:32

Parthik Gosar

11.7k3 gold badges27 silver badges16 bronze badges

Comments

Ritesh Kumar Gupta · Accepted Answer · 2013-03-28 05:36:38Z

0

You can do it using javascript.Add an image into N*4 matrix or Table.

<html>
<body>
<script type="text/javascript">
function myFunction(imgno)
{
    if(imgno%4==0)
    {
      document.write("</td></tr>");
    }
    else
    {
      document.write("<td><img src=\"" + imgno + ".jpg\"/> </td>");
    }
}
document.write("<table><tr>");

var i=0;
for (i=0;i<=20;i++)
{
    myFunction(i);
}
document.write("</table>");
</script>
</body>
</html>

answered Mar 28, 2013 at 5:36

Ritesh Kumar Gupta

5,2018 gold badges51 silver badges71 bronze badges

3 Comments

He Hui Over a year ago

tables are really not the best solution to solve this answer. there are alot of better CSS solutions

Ritesh Kumar Gupta Over a year ago

All other solutions(css/html) are posted.So i thought of a table as no one mentioned it. Even the poster asked Is there any way to do that in CSS or js, that's why posted a js solution.I think table are always the best solution for above question as it saves a lot of css,plus i guess table is always a cleaner solution. :)

He Hui Over a year ago

true. I personally try and avoid a table cluttered site, but I guess it provides another option for the asker :)

MarmiK · Accepted Answer · 2013-03-28 09:09:49Z

0

Only simple CSS will do that,

img{margin-bottom:5px;display:block; clear:both;}

Clear:both; will send the image to the new line, by clearing the float inheritance, and then it will automatically arranged below the previous element,

you can add other styles in that, but make sure you are not over-ridding it using float effect :)

Link to working fiddle :http://jsfiddle.net/MarmeeK/W3bsH/

this will do your work in one line :)

edited Mar 28, 2013 at 9:09

answered Mar 28, 2013 at 7:00

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to create new line with css or javascript?

7 Answers 7

2 Comments

Comments

5 Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

5 Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related