CODEWITHSUNDEEP
javascriptcsshtml
ZHOU
ZHOU

Reputation: 1181

How to create new line with css or javascript?

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.

Upvotes: 0

Views: 463

Answers (7)

He Hui
He Hui

Reputation: 2236

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;
}

Upvotes: 3

MarmiK
MarmiK

Reputation: 5775

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 :)

Upvotes: 0

David Gilbertson
David Gilbertson

Reputation: 4853

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.

Upvotes: 3

Ritesh Kumar Gupta
Ritesh Kumar Gupta

Reputation: 5191

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>

Upvotes: 0

Parthik Gosar
Parthik Gosar

Reputation: 11646

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>

Upvotes: 0

ManZzup
ManZzup

Reputation: 526

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

Upvotes: 0

Karol
Karol

Reputation: 8043

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>

Upvotes: 1

Related Questions