ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать три блока div по горизонтали
7 сообщений из 7, страница 1 из 1
как сделать три блока div по горизонтали
    #38219183
fobster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fobster
Участник
как сделать три блока по горизонтали? почему у меня получается фигня?
Код: sql
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.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0}
body
	{ 
	font: 12px/18px Georgia,Arial, Helvetica, sans-serif;
	background:url(img/bg.jpg) top no-repeat #000000;
	line-height:22px;
	color: #D5D5D6;
	}

a:link, a:visited 
	{
	color: #fff;
	outline: none;
	text-decoration: none;
	}

a:hover 
	{
	color: #FC5A02;
	text-decoration: none;
	}

div#header 
h1
	{
	height:80px;
	line-height:80px;
	margin:0;
	padding-left:10px;
	padding-top:10px;
	color: #79B30B;
	background:url(img/logo.png) center no-repeat;
	}

div#content 
	{
	height:60%;
	background:url(img/centr.png) center no-repeat;
	padding: 16%;
	background-size:50%;
	}

.content_left 
	{
	width: 200px;
	background: #17181A;
	color: #FD6204;
	margin: 0 25% 0 25%;/*верх прав ниж лев*/
	border: 3px solid #27292B;
	padding: 10px;
	float:left;
	}

.content_right 
	{
	background: #17181A;
	color: #FD6204;
	margin: 0 25% 0 48%;/*верх прав ниж лев*/
	border: 3px solid #27292B;
	padding: 10px;
	float:right;
	width:200px;
	}

.middle_content 
	{
	margin: 0 230px 0 ;
	width: 500px;
	height: 300px;
	border: 10px solid green;
        }

div#transparent
	{
	background-color: rgba(0, 0, 0, 0.2);
	margin: 0 25% 0 25%;
	padding: 1% 1%;
	text-transform: uppercase;
	color:#ffffff;
	font: bold 12px Georgia, "Times New Roman", serif;
	}

p
	{
	margin:0;
	padding:5px 10px;
	}

#menu 
	{
	list-style:none;
	padding:0;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	z-index:1;
	} 

#menu ul,li, hover 
	{
	color:#FD6204;
	float:left;
	} 

p.new::after 
	{
	content: "/"; /* Добавляемый текст */ 
	color: #fff; /* Цвет текста */ 
	padding: 30px; /* Поля вокруг текста */ 
	}

div#footer
	{
	background: #333;
	color: #FFF;
	width:50%;
	margin: 2% 25% 0 25%;
	}

</style>
</head>
<body>

<div id="header"><h1></h1></div>
<div id="transparent">
<ul id="menu">
	<li><p class="new"><a href="">Главная</a></p></li>
	<li><p class="new"><a href="">Миссия</a></p></li>
	<li><p class="new"><a href="">Услуги</a></p></li>
	<li><p class="new"><a href="">Советы</a></p></li>
        <li><p class="new"><a href="">Контакты</a></p></li>
</ul>
</div>
<div id="content">
</div>
<div class="content_left">текст 1
</div>
<div class="middle_content">текст 2
</div>
<div class="content_right">текст 3
</div>
<div id="footer"><p>© бла бла бла</p></div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.04.2013, 17:09
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219227
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Может потому что content открыт и закрыт? А left, middle и right как бы сами по себе. И в конце еще бесхозный </div> болтается.
...
Рейтинг: 0 / 0
09.04.2013, 17:32
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219233
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
width у content не задано, у его содержимого display:block по умолчанию, с какой стати им вообще по горизонтали становиться?
...
Рейтинг: 0 / 0
09.04.2013, 17:36
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219238
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
fobster,

на всякий случай...
По мотивам Выравнивание DIV свойством float
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
div {
  text-align: center;
}
#div1 {
  float: left;
  width: 200px;
  background-color: #8DD5EB;
}
#div2{
  float: left;
  width: 200px;
  background-color: #9C8DEB;
}
#div3{
  float: left;
  width: 200px;
  background-color: #FF9999;
}
</style>
</head>
<body>
<div id="div1"> DIV 1 </div>
<div id="div2"> DIV 2 </div>
<div id="div3"> DIV 3 </div>
</body>
</html>
...
Рейтинг: 0 / 0
09.04.2013, 17:38
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219246
fobster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fobster
Участник
спасибо, уже до дыр затерты похожие статьи, ну не становятся дивы в ряд, читаю еще..
ненужные </div> убрала
...
Рейтинг: 0 / 0
09.04.2013, 17:42
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219266
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Лучше нарисуйте в фотошопе, из кода совершенно не ясно, как должен выглядеть результат.
Если убрать конские резиновые маргины, можно получить это:
Код: 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.
34.
35.
div#content 
	{
	height:60%;
    width:100%;
	background:url(img/centr.png) center no-repeat #FD6204;
	background-size:50%;
    text-align:center;
	}

    div#content > div {display:inline-block}

.content_left 
	{
	width: 200px;
	background: #17181A;
	color: #FD6204;
	border: 3px solid #27292B;
	padding: 10px;
	}

.content_right 
	{
	background: #17181A;
	color: #D5D5D6;
	border: 3px solid #27292B;
	padding: 10px;
	width:200px;
	}

.middle_content 
	{
	width: 500px;
	height: 300px;
	border: 10px solid green;
        }
...
Рейтинг: 0 / 0
09.04.2013, 17:49
| Ответить | Цитировать | Написать  
как сделать три блока div по горизонтали
    #38219494
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
fobsterкак сделать три блока по горизонтали?
Начать можно с этого...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#right {
	float: right;
	width: 30%;
	background-color: silver;
}
#left {
	float: left;
	width: 200px;
	background-color: orange;
}
#center {
	margin-left: 200px;
	margin-right: 30%;
	background-color: blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='right'>right</div>
<div id='left'>left</div>
<div id='center'>center</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.04.2013, 21:13
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать три блока div по горизонтали
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=134&tid=1448464]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 50ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 54ms
get tp. blocked users:
 2ms
others: 211ms
total:  367ms
созд. / загр.: 367ms
x
x
Закрыть


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