Div блоки

zebraej · June 18, 2011

Кто знает как при помощи div сделать так чтобы был блок который содержит в себе 12 изображений по горизонтале 4 в 3 ряда

Softlink · June 18, 2011

Кто знает как при помощи div сделать так чтобы был блок который содержит в себе 12 изображений по горизонтале 4 в 3 ряда

а я бы таблицей такое сделал

p.s. во, даже пример такой уже делал. Ссылка.

Edited June 18, 2011 by Softlink

zebraej · June 18, 2011

Спасибо. Таблицей это панятно вот интерисует как без таблицы?

ShumNo · June 18, 2011

А фиксированная ли ширина родительского блока и ширина картинок? Если да, то делаем 12 блоков и кладем в каждый картинку. У каждого блока указываем float

psywalker · June 18, 2011

Кто знает как при помощи div сделать так чтобы был блок который содержит в себе 12 изображений по горизонтале 4 в 3 ряда

Я знаю.

ctpz · June 18, 2011

Я знаю.

css


.mydiv{width:496px;}
.mydiv img{width:120px; margin-left:2px; margin-right:2px;}

html


<div class="mydiv">
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>

Edited June 18, 2011 by ctpz

Softlink · June 18, 2011

Я знаю.

css


.mydiv{width:496px;}
.mydiv img{width:120px; margin-left:2px; margin-right:2px;}

html


<div class="mydiv">
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>

ну это если ширина фикс

ctpz · June 18, 2011

в смысле?

Softlink · June 18, 2011

в смысле?

уберите ширину блока и все станет ясно.

Я к тому, что может верстка резиновая, а надо в любом случае сделать 3 ряда по 4 картинки.

Тогда надо будет каждую строчку оборачивать в див. Делать либо флотом, либо инлайн-блоком.

ctpz · June 18, 2011

Ну тогда html тот же, а css такой:


.mydiv{width:100%;}
.mydiv img:first{width:23%; margin-left:1%;}
.mydiv img{width:23%; margin-right:1%;}

Softlink · June 18, 2011

Ну тогда html тот же, а css такой:
.mydiv{width:100%;}
.mydiv img:first{width:23%; margin-left:1%;}
.mydiv img{width:23%; margin-right:1%;}

неа, опять не так. Вы, судя по всему, сами не смотрите, что получается. Вставьте картинки вот прям в свой пример и посмотрите что выходит.

ctpz · June 18, 2011

Я как раз смотрю

Softlink · June 18, 2011

при том коде, что вы написали, картинки становятся в ряд, но при этом сами масштабируются. Разве этого не видно?

ctpz · June 18, 2011

Ну есть еще вариант на JS.

jumancy · June 20, 2011

Это очень просто

Между <body> пишем:

<div class="div">
<div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="clear"></div>
<div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="clear"></div>
<div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div><div class="img">
<img src="ley-forum_06.jpg" />
</div>
<div class="clear"></div>
</div>

А css такой:

	.img {
	   float: left;
	}
    .div {
        float: left;
    }

zebraej · June 20, 2011

Всем спасибо, за инфу, в продолжении как еще div внутри диваа отцентровать.

jumancy · June 20, 2011

у родительского блока должна быть фиксированная ширина, а блоку кот. надо центрировать прописываешь тоже ширину и margin:0 auto и он будет в центре

Softlink · June 20, 2011

Всем спасибо, за инфу, в продолжении как еще div внутри диваа отцентровать.

а задачу-то решили? Покажите как.

Bonzash · June 21, 2011

img {
 float: left;
}

Отсюда пляшем.

Edited June 21, 2011 by Bonzash

Sign In

Div блоки

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information