<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

тег float
15.06.2013 18:25:52 тег float Сообщение #1
midi63

midi63

Продвинутый

Продвинутый

Дата регистрации:
11.05.2013 14:57:31

Сообщений: 77

Создал конструкцию на дивах, в один поместил два других(колонки справа и слева)
задал мин. значение для главного блока т.е. в котором все лежит(простите за диалект) хотел чтобы главный див стал резиновым, но получилось что колонки просто выходят из него. Свойство обтекание от тега float сделало их как бы невидимыми для главного дива. Как можно исправить проблему?
Профиль Ответить
18.06.2013 13:12:14 тег float Сообщение #2
midi63

midi63

Продвинутый

Продвинутый

Дата регистрации:
11.05.2013 14:57:31

Сообщений: 77

Раз ни кто не ответил, тогда я сам отвечу на свой вопрос) Проблема, в принципе часто встречается, особенно в самом начале обучения. Интересно как из нее выходят опытные верстальщики?
Подобное обтекание убирается с помощью стиля clear. Но это спасает далеко не всегда.
Например когда стоит обводка у блока, блоки начинают перескакивают один под другой при уменьшении экрана. Как это исправить?
Я например это исправил так: правый блок прижал справа, а левый слева через стиль float.
И к левому блоку применил стиль margin-left:-20px; После этого перескакивать блоки перестали. Т.е. получилось вроде такой конструкции которая позволяет правый блок заезжать на левый, но при этом находится на своем месте.
Далее применил для блоков min-height:100%; и скрипт выравнивания по длинне.
Но до конца проблема не решилась все равно..
Получилось при уменьшении колонки все равно не тянутся, а имеют определенную длину, которая не понятно от куда возникает..
Профиль Ответить
18.06.2013 13:36:27 тег float Сообщение #3
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Накладывание блоков друг на друга - это недостаток блочной вёрстки. Как альтернативу можно было бы сделать горизонтальную полосу прокрутки, но это тоже плохой вариант. Поэтому надо адаптировать так, чтобы при 1024px ничего не налазило. Тогда и при больших разрешениях блоки друг на друга заходить не будут.
Профиль Ответить
19.06.2013 11:49:44 тег float Сообщение #4
midi63

midi63

Продвинутый

Продвинутый

Дата регистрации:
11.05.2013 14:57:31

Сообщений: 77

Михаил, а в табличной верстке по моему нельзя сделать резиновый каркас. Только определенные размеры. Это минус. Теперь попробую сверстать с помощью таблиц. Лучше на мой взгляд использовать и то и то. Вообще, если изначально смотреть на разработку сайта - 1 этап это рисование таблицы, по определенным пропорциям (золотое сечение Фибоначи). И только потом вставляются изображения, кнопки и т. п. и начинается верстка. Т.е. сайт по сути это и есть таблица. Верстка с помощью одних только блоков - это совершенно неоправданный гемор.
Профиль Ответить
22.06.2013 04:32:49 тег float Сообщение #5
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Почему в табличной верстке нельзя сделать резиновый каркас? По-моему можно (если я Вас правильно понял). Создали таблицу - ширина 100%. В таблице одна строка, в строке 3 ячейки. Допустим, левой и правой ячейкам задаете ширину 15%, а центральной ячейке 70%.

<table>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
</table>
Профиль Ответить
22.06.2013 05:10:47 тег float Сообщение #6
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

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

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Резиновая верстка</title>
<style type="text/css">
#main {
min-width: 800px;
max-width: 100%;
font-size: 50px;
}
#left {
width: 50%;
float: left;
background: #ff0;
}
#right {
width: 50%;
float: right;
background: #f0f;
}
</style>
</head>
<body>
<div id="main">
<div id="left">1111</div>
<div id="right">3333</div>
</div>
</body>
</html>
Профиль Ответить
22.06.2013 12:08:38 тег float Сообщение #7
midi63

midi63

Продвинутый

Продвинутый

Дата регистрации:
11.05.2013 14:57:31

Сообщений: 77

Я хотел страницу шириной в 1000px сделать плавающей в длину. Плюс ко всему сделать колонки внутри ее заданной ширины и с плавающей длинной и еще чтобы все блоки всегда были одинаковой длинны. Теперь понял что это совершенно ненужная затея.
Профиль Ответить