Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Maksat1991
0 / 0 / 0
Регистрация: 28.03.2015
Сообщений: 11
1

Резиновая верстка

28.10.2015, 21:04. Просмотров 128. Ответов 0
Метки нет (Все метки)

Читал про резиновую верстку и как я понял, резиновая верстка - это когда элементы на одной строке при разных разрешениях экрана элементы не уменьшаются и не перебрасываются на следующую строку, а ширина div-ки уменьшается, отступы между блоками сужаются и т.д.

Теперь вопрос. Как мне вывести резиново 5 блоков на одной строке?
Ниже привел пример который мне нужно прорезинить, но в примере отступы заданы фиксированно.
Пробовал float - криво, пробовал обернуть все в общий бокс с position: relative, а каждый отдельный блок внутри обернуть в div с postition:absolute, но при таком подходе все что показывается ниже будет наезжать.
В общем вопрос: резиновая верстка как осуществляется?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример блочной верстки</title>
<style>
div {border: 1px solid;}
.layer { overflow: hidden; padding: 10px; border: 3px solid #68b975; }
.col1 {width: 200px; float: left;}
.col2 {border: 1px solid red; float: left; margin-left: 150px;}
.col3 {border: 1px solid red; float: left; margin-left: 150px;}
.col4 {border: 1px solid blue; width: 200px; float: left; margin-left: 150px;}
.col5 {border: 1px solid red; float: right;}
.footer {clear: both;}
</style>
</head>

<body>

<div class="layer">
<div class="col1">Логотип</div>
<div class="col2">Необольшой текст</div>
<div class="col3">Курс валют</div>
<div class="col4">Время работы:<br />Пн-пт: Сб:<br />Вс:<br />Без обеда</div>
<div class="col5">Контакты</div>
</div>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.10.2015, 21:04
Ответы с готовыми решениями:

Резиновая верстка
Подскажите, какими средствами можно решить такое задание: На странице...

Резиновая верстка
Здравствуйте. Верстаю одностраничник по готовому дизайну. Ширина шаблона...

Резиновая верстка
Не могу понять одного. Как выставить &quot;резиновые&quot; параметры для страницы где...

Резиновая верстка
Добрый день! Нужно резиново спозиционировать div относительно wraper. Чтобы при...

Резиновая верстка
Такая вот проблема, есть 6 кнопок фиксированного размера.., как правильно их...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.10.2015, 21:04

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

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

резиновая верстка
прилагаю дизайн страницы, в качестве примера конечно же. Хочется узнать ответы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru