Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / выравнивание по высоте колонок div / 10 сообщений из 10, страница 1 из 1
30.06.2015, 05:39
    #38995489
Нурбек
Нурбек
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Добрый день уважаемые!
Помогите разобраться новичку с колонками 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, 08:12
    #38995515
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Нурбек , вот статейка...
http://xiper.net/collect/html-and-css-tricks/karkas-verstki/kolonki-ravnoy-visoty
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2015, 08:13
    #38995517
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
А это генератор страниц...
http://csstemplater.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2015, 13:35
    #38995937
Нурбек
Нурбек
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Спасибо большое krvsa,
Попробую, может что-то и получиться, как только получиться сообщу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2015, 14:08
    #38995976
Нурбек
Нурбек
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Спасибо, проблема решена, получилось таким образом:
код 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
| Ответить | Цитировать | Написать  
01.07.2015, 14:05
    #38996893
Нурбек
Нурбек
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Попробовал данный метод, все получилось кроме, рамка не закрывается снизу. Помогите люди добрые решить проблему.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.07.2015, 08:20
    #38997465
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
НурбекСпасибо, проблема решена, получилось таким образом
Вот еще современный вариант...

Код: 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
    #38997467
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
НурбекПопробовал данный метод, все получилось кроме, рамка не закрывается снизу.
D твоем последнем примере нет никакой рамки...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.07.2015, 14:29
    #38999003
Нурбек
Нурбек
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
Спасибо большое krvsa, все получилось, только в IE8 не получается.
Как думаете, есть решение с JavaScript, если его применить? или все токи найти другое решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.07.2015, 08:09
    #39000160
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
выравнивание по высоте колонок div
НурбекКак думаете, есть решение с JavaScript, если его применить?
C применением JS можно много чего наворотить!
Нурбекили все токи найти другое решение.
Ранее в колоночных делах хорошо помогали таблицы...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / выравнивание по высоте колонок div / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 483ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1445885]:
 0ms
get settings:
 6ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 207ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 203ms
total:  483ms
x
x
Закрыть


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