ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить горизонтально несколько div с размерами на всю остаточную ширину
17 сообщений из 17, страница 1 из 1
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486033
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
Здравсте!

Есть вопрос!
Имеется div: id="container" с процентной шириной
в нем располагаются несколько вложенных div: id="button-1", id="button-2",id="button-3",id="button-4".
Как сделать так, чтобы те вложенные div растягивались на всю допустимую ширину, но не переходили на сл. строку.
Переход на след строку допустим в том случае, если ширина родительского div менее ширины двух в сумме.
А также чтобы все это работало при вставке или удалении вложенного div.

<div id="conteiner">
<div id="button-1"></div>
<div id="button-2"></div>
<div id="button-3"></div>
<div id="button-4"></div>
</div>
...
Рейтинг: 0 / 0
02.12.2013, 14:56
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486092
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AndronovMV , сделай нормальный тестовый пример с указанием размеров и пр...
...
Рейтинг: 0 / 0
02.12.2013, 15:41
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486093
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AndronovMVПереход на след строку допустим в том случае, если ширина родительского div менее ширины двух в сумме.
Эо вообще только скриптом...
...
Рейтинг: 0 / 0
02.12.2013, 15:42
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486094
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
+ картинку приложить чего куда должно "переходить" или же нет.
...
Рейтинг: 0 / 0
02.12.2013, 15:42
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486126
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
...
Рейтинг: 0 / 0
02.12.2013, 16:02
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486201
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
AndronovMV,

возможно таблицей сверстать проще, не знаю...
Пока такой вариант
Код: 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.
<html>
<head>
<style type="text/css">
div {
	margin:4px;
	padding:4px;
	border:1px solid gray;
	border-radius:5px;
}
#conteiner {
	display:table;
	width:500px;
}
#button-1 {
	float:left;
	width:230px;
}
#button-2 {
	float:left;
	width:230px;
}
#button-3 {
	float:left;
	width:200px;
}
#button-4 {
	float:left;
	width:150px;
}
</style>
</head>
<body>
<div id="conteiner">
 <div id="button-1">Button1</div>
 <div id="button-2">Button2</div>
 <div id="button-3">Button3</div>
 <div id="button-4">Button4</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
02.12.2013, 16:46
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486218
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
AndronovMV,

с картинкой уже лучше, но не полно обрисована картина:
что произойдет в случае 1, 2 на 60% ширины, и в случае 3 на 100% ширины?

и правильно ли я сделала вывод, что ширина контейнера "кнопка" зависит от его содержания?
...
Рейтинг: 0 / 0
02.12.2013, 16:55
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486316
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
ZoriaAndronovMV,

с картинкой уже лучше, но не полно обрисована картина:
что произойдет в случае 1, 2 на 60% ширины, и в случае 3 на 100% ширины?

и правильно ли я сделала вывод, что ширина контейнера "кнопка" зависит от его содержания?

В случае 1, 2 произойдет 3
в случае 3 произойдет 1,2
...
Рейтинг: 0 / 0
02.12.2013, 17:40
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486325
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
user89AndronovMV,

возможно таблицей сверстать проще, не знаю...
Пока такой вариант
Код: 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.
<html>
<head>
<style type="text/css">
div {
	margin:4px;
	padding:4px;
	border:1px solid gray;
	border-radius:5px;
}
#conteiner {
	display:table;
	width:500px;
}
#button-1 {
	float:left;
	width:230px;
}
#button-2 {
	float:left;
	width:230px;
}
#button-3 {
	float:left;
	width:200px;
}
#button-4 {
	float:left;
	width:150px;
}
</style>
</head>
<body>
<div id="conteiner">
 <div id="button-1">Button1</div>
 <div id="button-2">Button2</div>
 <div id="button-3">Button3</div>
 <div id="button-4">Button4</div>
</div>
</body>
</html>



Этот вариант ограничевает тем, что при добавлении новой кнопки Button5 нужно будет лезть в таблицу стилей, а мне надо просто ее втиснуть между имеющимися кнопками

Спасибо за внимание!
...
Рейтинг: 0 / 0
02.12.2013, 17:42
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486331
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
Хотя нет, все нормально, просто главное чтобы это на мобильных устройствах отображалось полноценно
...
Рейтинг: 0 / 0
02.12.2013, 17:45
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486358
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
AndronovMVВ случае 1, 2 произойдет 3
в случае 3 произойдет 1,2
но у вас же в трех случаях разные кнопки нарисованы...
например, в 1м. при изменении ширины контейнера по вашему начальному описанию получатся
2 ряда кнопок по 2? или все же, каждая займет свой ряд?

Zoriaи правильно ли я сделала вывод, что ширина контейнера "кнопка" зависит от его содержания?
+ у вас кнопка 1 и 3 в 3м примере теоретически должны быть одинаковые по ширине, или?
...
Рейтинг: 0 / 0
02.12.2013, 17:56
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486400
AndronovMV
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AndronovMV
Гость
ZoriaAndronovMVВ случае 1, 2 произойдет 3
в случае 3 произойдет 1,2
но у вас же в трех случаях разные кнопки нарисованы...
например, в 1м. при изменении ширины контейнера по вашему начальному описанию получатся
2 ряда кнопок по 2? или все же, каждая займет свой ряд?

Zoriaи правильно ли я сделала вывод, что ширина контейнера "кнопка" зависит от его содержания?
+ у вас кнопка 1 и 3 в 3м примере теоретически должны быть одинаковые по ширине, или?

Возможно я не верно описал задачу, или не до описал. Не важно что написано на кнопках, нужно просто чтобы кнопки были выстроены в ряд по горизонтали. А если размер экрана меняется (например зашли из мобильника) то все кнопки были видны и если не помещаются по горизонтали, переносились в колонку.
...
Рейтинг: 0 / 0
02.12.2013, 18:14
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486415
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
AndronovMV,

тогда просто
#container div{float:left} ?
...
Рейтинг: 0 / 0
02.12.2013, 18:20
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486537
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89возможно таблицей сверстать проще, не знаю...
Таблица не переносит ячейки в новую строку...
...
Рейтинг: 0 / 0
02.12.2013, 19:46
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486543
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AndronovMV , смотрю твою картинку...
По какому принципу ты суешь кнопки разного размера в какой-то "обобщающий" контейнер?
...
Рейтинг: 0 / 0
02.12.2013, 19:50
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486554
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
krvsa AndronovMV , смотрю твою картинку...
По какому принципу ты суешь кнопки разного размера в какой-то "обобщающий" контейнер?
все не есть важно, наверное, это просто меню и его контейнер. :)
...
Рейтинг: 0 / 0
02.12.2013, 19:56
| Ответить | Цитировать | Написать  
Как расположить горизонтально несколько div с размерами на всю остаточную ширину
    #38486899
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Zoriaвсе не есть важно, наверное, это просто меню и его контейнер. :)
Ну как же "не важно"...
...
Рейтинг: 0 / 0
03.12.2013, 08:52
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить горизонтально несколько div с размерами на всю остаточную ширину
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=113&tid=1447601]:
 0ms
get settings:
 8ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 34ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 211ms
total:  332ms
созд. / загр.: 332ms
x
x
Закрыть


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