Здравствуйте. Возникла проблема в верстке. Существует слой с шириной 940px, необходимо разместить 4 картинки с шириной 200px в одну строку. Остальные картинки с пятой размещаются на второй строке и т.д. 1 и вторая картинки должны быть размещены впритык к левому(для первой) и к правой (для четвертой картинки). Исходя из этого, 940 - (200 * 4) = 140px. Т.е по 46px между 1 и 2, 2 и3, 3 и 4. Для этого я пробовал делать "text-align: justify". Для первой строки картинок все очень хорошо. Но со второй строки отсутствуют отступы: Ссылка на больного: http://ascin.ru/zyuzin/test.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> BODY { font: 12px Arial, Helvetica, sans-serif; } #portfolio { width:940px; text-align: justify; text-justify:newspaper; font-size:0; line-height:0; border: 1px solid #666; } #portfolio a { color: #666; } #portfolio a:hover { color: #ff0033; } #portfolio div { width: 200px; margin-bottom:70px; font-size:12px; line-height:1; display: inline-block; vertical-align: top; } #portfolio span { margin-top:10px; font-size:12px } </style> </head> <body> <div id="portfolio"> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test test test test test test test test test test test test test</a> </span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> <div> <img src="images/st-inteface.jpg"> <span><a href="#">Test</a></span> </div> </div> </body> </html>
