Display images from right to left

Asked

Viewed 248 times

2

I am currently having a problem with my code because I need the images to be displayed on the screen but that they come from right to left. The default is we put the codes <img> and they are going to display the images from left to right. Only I want when placing the codes <img> images start to be displayed from right to left. I currently have the code:

CSS

#includeload {
    height: 300px;
    width: 100%;
}

#align-rodape {
    position: absolute;
    margin-top: 150px;
}

#pagina-projetos {
    min-height: 100%;
    display: none;
    margin-top: 70px;
}

HTML structure

<div id="pagina-projetos">
    <h1 class="page-header">Projetos</h1>

    <div id="align-rodape" class="col-md-12">
        <div class="image-row">
            <div id="includeload" class="col-md-12"></div>
        </div>

        <a href="javascript:void(0);" id="submenu" page="comercial">Comercial</a> | 
        <a href="javascript:void(0);" id="submenu" page="industrial">Industrial</a> |
    </div>
</div>
html css

  • Could you make a small example in jsfiddle? I swear I’m trying hard, but I don’t understand what you’re trying to line up...

  • http://jsfiddle.net/mxbwavdo/

3 answers

4


Apparently what you want is something like this:

#includeload{height:300px;width:100%;}
#align-rodape{position: absolute;margin-top: 150px;}
#pagina-projetos{min-height: 100%;display: none;margin-top:70px;}
#includeload img {float:right}

  • with that code, when the width from the screen, the previous images go up to the top line? because I want to do so. As soon as the width is reached the images q were already listed on the screen, they go up to the top line to play to the bottom line.

  • In fact nothing goes up, the following are the bottom line. It would look like this: Line1: 4 3 2 1 Line 2: ... 6 5

  • 1

    I reverse the editing because code formatting (since correct and consistent) is individual taste. There is no reason to keep making a sausage with code like this. Besides, I was respecting the author’s original intention.

  • PS: I think the fault lies with who approved, and not @Juliano, who suggested.

1

float:right in imgs does not solve? I managed to make it work in your Jfiddle

img {float:right}

  • @Bacco it is. That’s enough, no?

  • Until then the OP had not given the Accept in the answer, so I answered based on an assumption. Now, with the Accept, I imagine that is indeed this.

1

Just completing with another way of doing.
Using the attribute dir="rtl".

Made just to direct the text - DIR-ESQ | ESQ-DIR, used to align the layout for languages written from right to left.

<div dir="rtl">
See a working example

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.