Выравнивание рисунков в слое

fazley · April 7, 2012

Здравствуйте.

Возникла проблема в верстке. Существует слой с шириной 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>

Pumych · April 7, 2012

Возможен следующий вариант?

Каждая строка отдельный UL (или DIV) по четыре изображения в каждом.

На каждый блок с изображением margin-left: 46px, кроме первого который получает margin-left: 0px

hypnocolor · April 7, 2012

http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine/

hypnocolor · April 7, 2012

Вот, как вариант. Ну, естественно, только в том случае, если все блоки фиксированной ширины (200 точек).

HTML:


<div id="portfolio">
<div style=" width: 980px; margin-left: -40px;">
<div>
    	<img src="test_files/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="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
</div>
</div>

CSS:


#portfolio
{
	text-align: justify;
	width: 940px;
	font-size:0;	
	line-height:0;	
	border:1px solid #666;
}

#portfolio a 
{ 
	color: #666;  
}
#portfolio a:hover 
{ 
	color: #ff0033; 
}
#portfolio div 
{
	width: 200px;
	margin-left: 40px;
	margin-bottom:70px;
	font-size:12px;	
	line-height:1;
	display: inline-block;
	vertical-align: top; 
}

#portfolio span
{ 
	font-size:12px;
}

fazley · April 7, 2012

Возможен следующий вариант?
Каждая строка отдельный UL (или DIV) по четыре изображения в каждом.
На каждый блок с изображением margin-left: 46px, кроме первого который получает margin-left: 0px

В принципе, возможен. Но есть но. Предполагается, что этот блок на сайте будет динамическим, т.е будут добавляться новые картинки постоянно и хотелось, чтобы стили для всех элементов были одинаковые.

Спасибо за ответ.

Да, всегда фиксированные. Спасибо за помощь.

fazley · April 7, 2012

Вот, как вариант. Ну, естественно, только в том случае, если все блоки фиксированной ширины (200 точек).

HTML:


<div id="portfolio">
<div style=" width: 980px; margin-left: -40px;">
<div>
    	<img src="test_files/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="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
<div>
	<img src="test_files/st-inteface.jpg">
	<span><a href="#">Test</a></span>
</div>
</div>
</div>

CSS:


#portfolio
{
	text-align: justify;
	width: 940px;
	font-size:0;	
	line-height:0;	
	border:1px solid #666;
}

#portfolio a 
{ 
	color: #666;  
}
#portfolio a:hover 
{ 
	color: #ff0033; 
}
#portfolio div 
{
	width: 200px;
	margin-left: 40px;
	margin-bottom:70px;
	font-size:12px;	
	line-height:1;
	display: inline-block;
	vertical-align: top; 
}

#portfolio span
{ 
	font-size:12px;
}

Да, все рисунки будут фиксированного размера, 200px. Благодарю за помощь.

Sign In

Выравнивание рисунков в слое

Question

fazley

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Pumych

Link to comment

Share on other sites

hypnocolor

Link to comment

Share on other sites

hypnocolor

Link to comment

Share on other sites

fazley

Link to comment

Share on other sites

fazley

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information