There is a set of images (more than 3):
<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
If you don't apply any styles, they go in a row (if space allows to). That's fine, however I want the last 3 images always appear on the next line. Is it possible to make it using pure css?
I've found a close solution:
img:nth-last-child(3){display:block;}
However, it breaks the images in three lines (that makes sense as it is display:block for third image from the end).
jsFiddle example
Looking for a pure css solution.
Thank you.
use
clear:both in css for last three images
img {
float:left;
}
img:nth-last-child(3) {
clear:both;
}
DEMO
Related
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
Exact instructions: Insert a style to float all img elements belonging to the irregularWrap class on the right margin, but only when the right margin is clear of other floating elements.
I'm not really sure what this question means? I get the float property but whats does it mean by only when the right margin is clear of other floating elements?
<img src="images/student1.jpg" alt="" class="irregularWrap">
<img src="images/student2.jpg" alt="" class="irregularWrap">
<img src="images/student3.jpg" alt="" class="irregularWrap">
<img src="images/student4.jpg" alt="" class="irregularWrap">
<img src="images/student5.jpg" alt="" class="irregularWrap">
So those are the images, basically, its one images cut into 5 seperate pieces horizontally to make the words look like they kinda outline the image around the left edge.
The CSS I currently have is:
.irregularWrap { float: right; margin: 0px; }
I'm not sure if I'm just overthinking this due to my brain being fried trying to prepare for finals or if this is really just something we didn't quite cover. Any ideas where I'm messing up here?
This is what all 5 images should look like when they come together as the one picture.
to clarify, this is what I'm getting with the 5 images, instead of them looking as they do in the previous image
In the CSS I needed to add
clear: right;
As I explained in a previous comment, I forgot to change the stylesheet link to include the folder on my html sheet so it was throwing my entire game off. Like I said, brain is probably fried. Lol.
Thanks for the help guys!
You could try:
img {
display:inline; // or inline-block;
}
I'm helping a friend with a website and need some advice. We asked here before, and were told to update all the necessary jQuery files on the server, done that, but still broken.
Website: 3six-d.co.uk
If you go to the portfolio, you will see all the pictures are out of line, not the rows, but the columns.
I'm using this to set the spacing:
<div class="col-md-4">
<a class="fancybox-test" data-fancybox-group="thumb" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
Just to be clear I have upgraded from Bootstrap 2 to 3. But I have followed the instructions and upgraded all the syntax's. (I hope anyway) But still no luck, they just won't line up as they used to (Gaps between the columns and pictures of equal space).
I have done abit of research on this myself, and all that I can find is that they must all by in the container div, which they are.
This is driving me crazy, so I would love some help!
Thanks
You could just add the following CSS to your images.
.fancybox-test > img {
width: 100%;
vertical-align: middle;
}
The vertical-align: middle property removes the padding at the bottom of the images.
Your columns are set at 31.6% width each, which is coming out at 340px wide. The preview images are 460x300 so are all overlapping. Set them a size or better yet upload the correct size.
Is this what you expect? If yes, just add following rule to your CSS
.fancybox-test img{
width:100%;
}
<div class="col-md-4">
<a class="thumbnail" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
What's wrong with native thumbnail class of bootstrap?
Our organization works in a content management system and for expedited reasons we've arranged pictures using tables. I'd like to get away from that practice and provide a road map (CSS) to doing it properly.
We arrange pictures in a row side-by-side with a title under the picture, normally two lines of text.
Here is an example of what I start constructing.
<style>
#piccaption
{
font-size: x-small;
}
#picimages
{
text-align:center;
margin:0px auto;
}
#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
Using this with my HTML...
<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>
Can someone help me with the proper way to do this as well as place a 2nd, 3rd picture next to this first one with a nice padding between the pictures?
Thanks,
Dave
An easy way to lay multiple blocks out horizontally would be to set the display to inline-block, with margins on either side to space them the way you like. Inline-block works in all browsers from Internet Explorer 8 and up (if you really need to make it compatible with Internet Explorer 7, you can add *display: inline after the inline-block).
The advantage of using inline-block instead of floats is that even if an image has an exceptionally long caption, the layout doesn't break as it would with floats.
Also, be sure to use classes instead of IDs for elements that occur more than once on a page.
Here is a jsFiddle example based on the code you pasted: http://jsfiddle.net/skymaiden/zvpHW/
I'm trying to make two horizontal divisons using <div> tag in html, but I couldn't make it. Can anyone help me make horizontal division using html and css with <div> tags?
<div id="firstDivistion" class="division"></div>
<div id="secondDivistion" class="division"></div>
.division{
width:50%;
height:100px;
float:left;
}
`<div style='float:left'>stuffs</div>
<div style='float:right'>stuffs</div>
<div style='clear:both'></div>`
Works well in every cases and is followed in many places...
Set the float property for each div to be matched, for example left to each, give each of them enough width so that the parent contains them.
DEMO