I can't touch the html theme but I have access to the css files.
<div class="photos">
<img src="a.jpg" alt="" align="left" />
<img src="b.jpg" alt="" align="left" />
<img src="c.jpg" alt="" align="left" /> //align makes the images wrap
</div>
Unfortunately I can't remove align="left" from the images otherwise this CSS snippet would have done the job
.photos{
white-space: nowrap;
}
.photos img{
display: inline;
vertical-align: top;
}
Any ideas? Is it even possible to make these images line-up horizontally without using the force of a table and only with CSS?
Many Thank in advance!
Try float: none;
:
.photos img{
display: inline;
vertical-align: top;
float: none;
}
Try this:
.photos img{
display: inline;
vertical-align: top;
clear: both; // clears the floating
}
You can check out more about the CSS clear
property on W3Schools.
EDIT
Sorry I misread you. Thought you were trying to stack them. You're right to go with float: none
, or clear: right
that would also negate the float. I would probably go with both to play safe on IE's sometime crazy CSS assumptions! ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With