开发者

Get the image to be placed right ruby on rails

开发者 https://www.devze.com 2023-01-27 01:12 出处:网络
I\'m currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called F开发者_运维百科lickraw. I have to somehow know when the image i

I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called F开发者_运维百科lickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.

Get the image to be placed right ruby on rails

(sorry about it is danish)

So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.

Thank you!

PS. i wan't as much as possible to not use tables.


Here is my suggestion.

HTML

<div class="photo-row">
    <div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>

CSS

.photo-row .photo {
    background-color: rgb(230,230,230);
    display: inline-block;
    vertical-align: middle;
    width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }

Example: http://jsfiddle.net/xYZjL/

That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.


You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".

Then you can use CSS to define float and clear layout rules for each.

0

精彩评论

暂无评论...
验证码 换一张
取 消