Проблема с блоками DIV

iLEM · May 27, 2011

У меня возникла следующая проблема при верстке страницы сайта: На странице находится 4 картинки с подписями, заключенные в <div> блоки, нужно разместить их в строчку так, чтобы они были равноудалены друг от друга, и ,при сужении окна браузера, 2 картинки съезжали вниз и опять становились равноудаленными друг от друга и от краев. Пробовал указывать <div align="center"> - не помогло.

-когда окно браузера широкое и позволяет разместить 4 картинки

-когда окно браузер узкое

С уважением, Евгений.

Edited May 27, 2011 by iLEM

Softlink · May 27, 2011

задайте ширину и маржины блокам-родителям больше той, при которой один опускается вниз. В идеале все само сработает.

Edited May 27, 2011 by Softlink

iLEM · May 27, 2011

задайте ширину и маржины блокам-родителям больше той, при которой один опускается вниз. В идеале все само сработает.

а можно поподробней кому присваивать маргин?, а то уже котелок не варит)

Softlink · May 27, 2011

не до конца понял задачу. Съезжать-то они съезжают, теперь надо по центру выровнять их.

Softlink · May 27, 2011

отчего-то мне кажется, что одним хтмл с ксс тут не сделаешь так.

Получается, что надо после того, как блок съедет вниз, чтобы они встали в центр.

Пока вижу два варианта.

Это задавать блокам минимальную ширину, при котором один поедет вниз и оба будут в центре, но тогда надо чтобы оба с этой мин. шириной влазили в большом экране.

А второй - это как-то растягивать дивы после того, как они разъедутся по строчкам. И тут наверное точно не сделать только на ксс.

Или я может быть чего-то не догоняю

iLEM · May 27, 2011

Все правильно вы поняли. Мне тоже уже кажется, что нужны скрипты. Скрипты возможны(если кто напишет, я их не знаю).

Тогда может есть вариант как по другому расположить эти блоки на экране, чтобы они гармонично смотрелись когда их 4 в строке и когда они съезжают вниз.

Softlink · May 28, 2011

Все правильно вы поняли. Мне тоже уже кажется, что нужны скрипты. Скрипты возможны(если кто напишет, я их не знаю).
Тогда может есть вариант как по другому расположить эти блоки на экране, чтобы они гармонично смотрелись когда их 4 в строке и когда они съезжают вниз.

ну а по левому краю выровнять не подойдет?

iLEM · May 28, 2011

Все правильно вы поняли. Мне тоже уже кажется, что нужны скрипты. Скрипты возможны(если кто напишет, я их не знаю).
Тогда может есть вариант как по другому расположить эти блоки на экране, чтобы они гармонично смотрелись когда их 4 в строке и когда они съезжают вниз.
ну а по левому краю выровнять не подойдет?

это самый простой вариант, конечно, но смотрится не фонтан...

psywalker · May 28, 2011

А почему бы не сделать два контейнера по 50% и их в инлайн-блок например, а в эти блоки уже по два дива?

А я так понимаю, что проблема в том, что при сужении правый блок перескакивает на другую строку?

iLEM · May 28, 2011

А почему бы не сделать два контейнера по 50% и их в инлайн-блок например, а в эти блоки уже по два дива?
А я так понимаю, что проблема в том, что при сужении правый блок перескакивает на другую строку?

да так-то вроде, на словах, понятно, а вот увидеть бы это на странице

Softlink · May 29, 2011

А почему бы не сделать два контейнера по 50% и их в инлайн-блок например, а в эти блоки уже по два дива?
А я так понимаю, что проблема в том, что при сужении правый блок перескакивает на другую строку?
да так-то вроде, на словах, понятно, а вот увидеть бы это на странице

psywalker говорил примерно об этом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>пример</title>
<style>
.body{
margin:0;
padding:0;
}

.main{
height:100%;
width:100%;
}

.left{
width:47%;
border:1px solid #000;
height:200px;
float:left;
margin:10px;

}

.right{
width:47%;
border:1px solid #000;
height:200px;
float:left;
margin:10px;

}

.ris{
width:200px;
height:200px;
border:1px solid #ccc;
float:left;
}
</style>        
</head>
<body>
	<div class="main">
		<div class="left">
			<div class="ris"></div>
			<div class="ris"></div>
		</div>
		<div class="right">
			<div class="ris"></div>
			<div class="ris"></div>
		</div>
	</div>	
</body>
</html>

т.е. если задача просто отобразить два блока и чтобы они влезли, то такой вариант вполне подходит. Я сразу понял, что второй блок при уменьшении разрешения обязательно должен вниз свалиться.

Edited May 29, 2011 by Softlink

iLEM · May 29, 2011

Именно так, но при этом блоки должны постоянно находится по центру экрана. Обновил картинки, как должно быть, может что-то и прояснит.

psywalker · May 29, 2011

Вместо float:left; используй inline-block;

iLEM · May 29, 2011

Вместо float:left; используй inline-block;

я не знаю что такое inline-block

psywalker · May 29, 2011

Вместо float:left; используй inline-block;
я не знаю что такое inline-block

Так ведь я когда-то тоже не знал, прикинь

iLEM · May 29, 2011

Разговор зашел в тупик.

Я бы не писал сюда, если бы знал как сделать.

psywalker · May 29, 2011

Разговор зашел в тупик.
Я бы не писал сюда, если бы знал как сделать.

А взять в руки книгу слабо?

iLEM · May 29, 2011

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

Кинь ссылку и злится это плохо

psywalker · May 29, 2011

Разговор зашел в тупик.
Я бы не писал сюда, если бы знал как сделать.
А взять в руки книгу слабо?
Кинь ссылку и злится это плохо

Т.е. ты предлагаешь мне поискать за тебя в гугле?

iLEM · May 29, 2011

Разговор зашел в тупик.
Я бы не писал сюда, если бы знал как сделать.
А взять в руки книгу слабо?
Кинь ссылку и злится это плохо
Т.е. ты предлагаешь мне поискать за тебя в гугле?

Конечно нет, может у тебя есть любимая книга и ты можешь ей поделится? - Спасибо за культурную беседу, буду сам разбираться.

psywalker · May 29, 2011

Разговор зашел в тупик.
Я бы не писал сюда, если бы знал как сделать.
А взять в руки книгу слабо?
Кинь ссылку и злится это плохо
Т.е. ты предлагаешь мне поискать за тебя в гугле?
Конечно нет, может у тебя есть любимая книга и ты можешь ей поделится? - Спасибо за культурную беседу, буду сам разбираться.

Давно пора уже.

iLEM · May 30, 2011

Спасибо, я разобрался

Sign In

Проблема с блоками DIV

Question

Link to comment

Share on other sites

21 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

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