ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / выравнивание по высоте колонок div
10 сообщений из 10, страница 1 из 1
выравнивание по высоте колонок div
    #38995489
Нурбек
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Нурбек
Гость
Добрый день уважаемые!
Помогите разобраться новичку с колонками div, т.к. не получается выравнять высоту, пробовал делать по этой ссылке http://habrahabr.ru/post/64173/ , исчезает расстояние между колонок, табличным делать не хочется, буду рад если кто-то поможет с решением задачи.
вот код:
Код html:
Код: html
1.
2.
3.
4.
5.
<div id="wrapper">
    <div id="sidebar_left"> </div>
	<div id="sidebar_right"> </div>
	<div id="content"> </div>
</div>



Код css
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
#wrapper{
    width: 90%;
    outline: 1px solid #81ab9c;
    padding: 10px;
    margin: 0 auto;
	position:relative;
	font-family: Times, Georgia, Times New Roman, Courier New, Arial, Tahoma;
	color:#355945;
	font-size:100%;
}
#sidebar_left{
   	background-color: #ffffff;
    margin-bottom: 10px;
    width: 32%;
    float: left;
	border:1px solid #81ab9c;
}
#sidebar_right{
	background-color: #ffffff;
    margin-bottom: 10px;
    width: 32%;
    float: right;
	border:1px solid #81ab9c;
}
#content{
	background: #ffffff;
   	margin: 0 0 10px 33%;
    width: 34%;
	border:1px solid #81ab9c;
}
#clear {
    clear:both; /*Отменяем позиционирование (влияние float)*/
}
...
Рейтинг: 0 / 0
30.06.2015, 05:39
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38995515
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Нурбек , вот статейка...
http://xiper.net/collect/html-and-css-tricks/karkas-verstki/kolonki-ravnoy-visoty
...
Рейтинг: 0 / 0
30.06.2015, 08:12
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38995517
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А это генератор страниц...
http://csstemplater.com
...
Рейтинг: 0 / 0
30.06.2015, 08:13
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38995937
Нурбек
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Нурбек
Гость
Спасибо большое krvsa,
Попробую, может что-то и получиться, как только получиться сообщу.
...
Рейтинг: 0 / 0
30.06.2015, 13:35
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38995976
Нурбек
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Нурбек
Гость
Спасибо, проблема решена, получилось таким образом:
код html:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<div class="fon"> <!-- блок-родитель -->
    <div class="leftColumn">
    <p>левая колонка</p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
    <div class="centerColumn">
    <p>центральная колонка</p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
    <div class="rightColumn">
    <p>правая колнка</p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    <p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
</div>


Код CSS:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
.fon {
width: 98%;
overflow: hidden; /* чтобы лишее обрезалось */
}
.leftColumn {
width: 32%;
float: left;
background: #3d2af0;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
.centerColumn {
width: 34%;
float: left;
background: #e34456;
padding-bottom: 20000px;
margin-bottom: -20000px;
margin-left: 1%;
margin-right: 1%;
}
.rightColumn {
width: 32%;
float: left;
background: #e3e244;
padding-bottom: 20000px;
margin-bottom: -20000px;
}



надеюсь все получиться.
...
Рейтинг: 0 / 0
30.06.2015, 14:08
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38996893
Нурбек
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Нурбек
Гость
Попробовал данный метод, все получилось кроме, рамка не закрывается снизу. Помогите люди добрые решить проблему.
...
Рейтинг: 0 / 0
01.07.2015, 14:05
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38997465
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
НурбекСпасибо, проблема решена, получилось таким образом
Вот еще современный вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.fon {
	width: 98%;
	display: flex;
}
.leftColumn {
	width: 32%;
	background: #3d2af0;
}
.centerColumn {
	width: 34%;
	background: #e34456;
	margin-left: 1%;
	margin-right: 1%;
}
.rightColumn {
	width: 32%;
	background: #e3e244;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="fon">
    <div class="leftColumn">
		<p>левая колонка</p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
    <div class="centerColumn">
		<p>центральная колонка</p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
    <div class="rightColumn">
		<p>правая колнка</p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
		<p>афцацукдлапдкутмд ултафцдтпдкф фтуцдлтпдлфкуцт цптфдптдкулфп цфлдптдцфтпдд тфплцдлтпдц </p>
    </div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
02.07.2015, 08:20
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38997467
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
НурбекПопробовал данный метод, все получилось кроме, рамка не закрывается снизу.
D твоем последнем примере нет никакой рамки...
...
Рейтинг: 0 / 0
02.07.2015, 08:20
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #38999003
Нурбек
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Нурбек
Гость
Спасибо большое krvsa, все получилось, только в IE8 не получается.
Как думаете, есть решение с JavaScript, если его применить? или все токи найти другое решение.
...
Рейтинг: 0 / 0
03.07.2015, 14:29
| Ответить | Цитировать | Написать  
выравнивание по высоте колонок div
    #39000160
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
НурбекКак думаете, есть решение с JavaScript, если его применить?
C применением JS можно много чего наворотить!
Нурбекили все токи найти другое решение.
Ранее в колоночных делах хорошо помогали таблицы...
...
Рейтинг: 0 / 0
06.07.2015, 08:09
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / выравнивание по высоте колонок div
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38995976&tid=1445885]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 60ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 65ms
get tp. blocked users:
 1ms
others: 249ms
total:  416ms
созд. / загр.: 416ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]