I want to use CSS to reproduce the behaviour of the simple HTML table below.
The HTML table has a width of 100% with just one row and three columns. Each column contains an image where image1 is left-aligned; image2 is centered; and image3 is right-aligned.
Importantly, when the browser window is resized to be very small, the images should not overlap or wrap onto the next line. They should simply stay next to each other in the same line (this is what the table solution does).
This sounds like such a simple requirement, but I've been struggling with this for many hours and so any help would be very much appreciated.
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>
</body>
</html>
Many thanks in advance.
Aucun commentaire:
Enregistrer un commentaire