Tengo esta imagen, pero quiero que salgan tres por lado.
Original:
Imagen modificada con photoshop:
Quiero que quede como la segunda imagen que salgan tres pero no se como hacerlo, aqui esta el codigo de la pagina:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Silverlight</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <script type="text/javascript">var clear="images/clear.gif";</script> <script type="text/javascript" src="unitpngfix.js"></script> <![endif]--> <style type="text/css"> <!-- .Estilo1 {color: #ffffff} .Estilo2 {color: #000000} .Estilo5 {font-size: 9px} --> </style> </head> <body> <!-- BEGIN wrapper --> <div id="wrapper"> <!-- BEGIN header --> <div id="header"> <h1><a href="http://www.free-css.com/">Silverlight</a></h1> <div class="ad"><a href="http://www.free-css.com/"><img src="images/ad468x60.gif" alt="" /></a></div> <div class="break"></div> <ul> <li><a href="http://www.free-css.com/" class="Estilo1">Home</a></li> <li><a href="about.html"><span class="Estilo1">Registro </span></a></li> <li><a href="page.html"><span class="Estilo1">Login</span></a></li> <li><a href="contact.html" class="Estilo1">Contacto</a></li> </ul> <form action="http://www.free-css.com/"> <input type="text" name="s" id="s" value="" /> <button type="submit">Search</button> </form> </div> <!-- END header --> <!-- BEGIN body --> <div id="body"> <!-- BEGIN content --> <div id="content"> <!-- begin post --> <!--AQUI ESTA LA IMAGEN --> <div class="first post"> <div class="l"> <a href="http://www.free-css.com/"><img src="images/_thumb3.jpg" alt="" /></a> <p> </p> </div> </div> <!-- end post --> <!-- begin post --> <div class="post"> <div class="l"> <p><a href="http://www.free-css.com/"><img src="images/_thumb1.jpg" alt="" /></a> <span class="Estilo5"><strong>January 13, 2009</strong></span></p> <p><span class="Estilo5"><strong>Posted by:</strong> <a href="http://www.free-css.com/">admin</a><strong>Categories:</strong> <a href="http://www.free-css.com/">News</a><strong>Tags:</strong> <a href="http://www.free-css.com/">concert</a>, <a href="http://www.free-css.com/">motion</a>, <a href="http://www.free-css.com/">products</a></span></p> </div> <div class="r"> <h2><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></h2> <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Nullam at lorem. Curabitur tincidunt lectus a urna. In adipiscing ornare libero. Maecenas convallis risus et felis. Fusce ut odio ac orci elementum tempus. Suspendisse sapien leo, gravida eu, luctus id, luctus eu, sem. Integer urna diam, tincidunt ultricies, malesuada sed, faucibus id, lacus. Pellentesque quam nulla, molestie eu, imperdiet in, placerat eu, enim. Aenean tempor, leo a ornare viverra, purus felis rhoncus enim, et condimentum urna enim quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et enim. Nam vitae justo. Duis volutpat mauris eu quam. Fusce sed tortor et sem convallis aliquam.</p> <p>Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio. Vivamus porttitor orci sed nunc. Morbi tempus venenatis nibh. Donec erat nulla, gravida et, semper sed, pulvinar ut, ante. Praesent vitae nisl ac libero volutpat pulvinar. Mauris fringilla rutrum nisl. Vestibulum egestas elit in lectus. Proin aliquet consectetur leo. Mauris ullamcorper enim nec tortor.</p> </div> </div> <!-- end post --> <!-- begin post --> <div class="post"> <div class="l"> <a href="http://www.free-css.com/"><img src="images/_thumb2.jpg" alt="" /></a> <p class="Estilo5"><strong>January 13, 2009</strong></p> <p class="Estilo5"><strong>Posted by:</strong> <a href="http://www.free-css.com/">admin</a></p> <p class="Estilo5"><strong>Categories:</strong> <a href="http://www.free-css.com/">News</a></p> <p><span class="Estilo5"><strong>Tags:</strong> <a href="http://www.free-css.com/">concert</a>, <a href="http://www.free-css.com/">motion</a>, <a href="http://www.free-css.com/">products</a></span></p> </div> <div class="r"> <h2><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></h2> <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Nullam at lorem. Curabitur tincidunt lectus a urna. In adipiscing ornare libero. Maecenas convallis risus et felis. Fusce ut odio ac orci elementum tempus. Suspendisse sapien leo, gravida eu, luctus id, luctus eu, sem. Integer urna diam, tincidunt ultricies, malesuada sed, faucibus id, lacus. Pellentesque quam nulla, molestie eu, imperdiet in, placerat eu, enim. Aenean tempor, leo a ornare viverra, purus felis rhoncus enim, et condimentum urna enim quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et enim. Nam vitae justo. Duis volutpat mauris eu quam. Fusce sed tortor et sem convallis aliquam.</p> <p>Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio. Vivamus porttitor orci sed nunc. Morbi tempus venenatis nibh. Donec erat nulla, gravida et, semper sed, pulvinar ut, ante. Praesent vitae nisl ac libero volutpat pulvinar. Mauris fringilla rutrum nisl. Vestibulum egestas elit in lectus. Proin aliquet consectetur leo. Mauris ullamcorper enim nec tortor.</p> </div> </div> <!-- end post --> </div> <!-- END content --> <!-- BEGIN sidebar --> <div id="sidebar"> <!-- begin about --> <div class="about"> <a href="http://www.free-css.com/"><img src="images/about.jpg" alt="" /></a> <p><span class="Estilo2"><strong>Matt Mullenweg</strong> Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio.</span></p> </div> <!-- end about --> <!-- begin categories --> <h2>Categories</h2> <ul> <li><a href="http://www.free-css.com/">Blog Updates</a></li> <li><a href="http://www.free-css.com/">Environment</a></li> <li><a href="http://www.free-css.com/">Graphics</a></li> <li><a href="http://www.free-css.com/">Internet</a></li> <li><a href="http://www.free-css.com/">Recent News</a></li> </ul> <!-- end categories --> <!-- begin archives --> <h2>Archives</h2> <ul> <li><a href="http://www.free-css.com/">March 2009</a></li> <li><a href="http://www.free-css.com/">February 2009</a></li> <li><a href="http://www.free-css.com/">January 2009</a></li> <li><a href="http://www.free-css.com/">December 2008</a></li> </ul> <!-- end archives --> <!-- begin blogroll --> <h2>Blogroll</h2> <ul> <li><a href="http://www.free-css.com/">Greg's Gallery</a></li> <li><a href="http://www.free-css.com/">WebDev Forums</a></li> <li><a href="http://www.free-css.com/">Photo Gallery</a></li> <li><a href="http://www.free-css.com/">Video Studio</a></li> </ul> <!-- end blogroll --> <!-- begin meta --> <h2>Meta</h2> <ul> <li><a href="http://www.free-css.com/">Login</a></li> <li><a href="http://www.free-css.com/">Entries RSS</a></li> <li><a href="http://www.free-css.com/">Comments RSS</a></li> </ul> <!-- end meta --> </div> <!-- END sidebar --> <div class="break"></div> </div> <!-- END body --> <!-- BEGIN footer --> <div id="footer"> <p>Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved | Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a> </p> </div> <!-- END footer --> </div> <!-- END --> </body> </html>
