html - Vertical and Horizontal alignment

Keywords:html 


Question: 

I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :

Image1 Image2 Image3    
Image4 Image5 Image6    
Image7 Image8 Image9

<html>
 <head>
  <title>Display Images</title>
 </head>
 <body>
  {% for image in images %}
    <div> 
      <img src={{ self.item_.images }}>
     </div>
  {% endfor %}
 </body>
<html>

All the images there after aligns in the same order. First row with three images, then automatically break, then next row.

Please help. Best Regards




5 Answers: 

Simply float every image left...then clear after every third image in order to force the next three to a new line.

You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.

Demo Fiddle

CSS

img{
    float:left;
}
img:nth-child(3n+1){
    clear:left;
}
 

Is this what you want?

DEMO

HTML

<div class='container'>
    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>

    <img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>

CSS

.container{
    display:block;
    width:400px;
    }

.container img{
    float:left;
    padding:1px;

}
 
       Image1 (fll) Image2 (fll) Image3 (fll)    
(clear)Image4 (fll) Image5 (fll) Image6 (fll)    
(clear)Image7 (fll) Image8 (fll) Image9 (fll)    

Where :

fll   - float: left
clear - clear: both
 

Do you want your images to have a fixed size?

If not:

<html>
<head>
<style>
    img {
        width: 33%;
        height: 100px;
        float: left;
    }
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>

If yes: (You might need to consider a fixed container width.)

<html>
<head>
<style>
    .main-container {
        width: 900px;
        margin: 0 auto;
    }

    img {
        width: 300px;
        height: 200px;
        float: left;
    }
</style>
</head>
<body>
    <div class="main-container">
        <img src=""><img src=""><img src="">
        <img src=""><img src=""><img src="">
        <img src=""><img src=""><img src="">
    </div>
</body>
</html>

Floating allows the images to fill a row. Fixed with of images and the container makes it possible to determine how many images there will be in the row.

If you want to follow responsive design, you could add break point to your page so that in smaller screen sizes your grid of images depends on available space.

Normally you will want to have fixed size for your images that is their actual size. Otherwise the displayed quality of the images might be bad.

 

You can find the idea here

Then I customize it for you.

<!DOCTYPE html>
<html>
<head>
    <style>
    .container 
    {
        width:500px;
    }
    div.img
    {
        margin: 5px;
        padding: 5px;
        border: 1px solid #0000ff;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }   
    div.img img
    {
        display: inline;
        margin: 5px;
        border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 5px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <div class="img">
            <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
</body>
</html>
 

More Articles


Best iPhone/iOS framework for Presentation Apps

Which framework do you suggest for building an application to manage presentation, like an interactive and multimedia brochure?Do you think the iOS is enough?

Using Android Presentation class with a Bluetooth mouse

I am attempting to use the Presentation class for Android to display a secondary app on another display which can be navigated with the mouse; however, when I connect a Bluetooth mouse to the phone it only shows the cursor and allows for click inputs on the phone's primary display. Is there a way to

r - Include googleVis chart in ioslides RStudio

I have a following chart:library(googleVis)df = data.frame(models = c("PLAT", "LC", "APC", "CBD", "M6", "M7", "M8"), val = 1:7)Column <- gvisColumnChart(df)plot(Column)I would like to place it in ioslides in RStudio.Can anyone instruct me how to do it?


android - runOnUiThread in Presentation class

How can I update TextView in Presentation class if RunOnUiThread is not available in this class.Here is my exampleprivate final class DemoPresentation extends Presentation { public DemoPresentation(Context context, Display display) { super(context, display); } @Override protected

css - Presenting two paragraphs in HTML side by side

Consider the following problem: you have one text translated into two languages,First line // Unua linioSecond line // Dua linioand there's a need to display them side by side using all available space, make them accessible to search engines as separate paragraphs and allowing separate selection. Th

objective c - iOS Now Playing View Similar To Music/Spotify App

I am trying to figure out how to create a "Now Playing" view similar to the one in the Music app and the Spotify app.Here are a few images of what I'm trying to re-create:Creating the view is not the problem. The part I'm having trouble with is how to keep the view on the screen at the bottom with t


html - Reveal.js iframe background

I want an embedded iframe to be full screen (or an adjusted percentage of the full screen) in a reveal.js presentation. This discussion implies that I can set the iframe as a background, but this returns the default background:<section data-background="http://viz.healthmetricsandevaluation.org/f

jquery - Chaining animated sequences for an infinite loop presentation

I'm coding up a presentation for display on a TV in the office reception area and need some help please.I've tried numerous StackOverflow answers to try and resolve this, but none relate particularly well to my situation. I have spent days trying to solve this and am ready to quit.Here's the main bu

apache poi - What are these fonts in a powerpoint pptx file?

I want to collect font information of a pptx with the help of Apache POI. I basically search for string typeface= in the xmlObject of a powerpoint slide.In some of my files, I can see a bunch of lines that contains the search string: <a:latin typeface="+mn-lt"/> <a

user interface - Using HTML to present stuctured data

I have a question about how to present some structured data using HTML.I have some tree-like data, which you might normally present using sections and subsections (i.e. <h1>, <h2>, etc.) and/or using nested lists (i.e. lists whose items contain lists of sub-items).An example of this data