Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2011, 18:34
Интересующийся
Отправить личное сообщение для Detex Посмотреть профиль Найти все сообщения от Detex
 
Регистрация: 01.03.2011
Сообщений: 14

Div аналогично Table
Доброго времени суток. Можно ли сделать на дивах так, чтобы два дива стояли в ряд, первый был шириной, допустим, 100, а второй занимал всё остальное пространство аналогично такой таблице:

<table border=1 width=100%>
	<tr>
	<td width=100>1</td><td>2</td>
	</tr>
	</table>


Пробовал по всякому - не вышло.
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2011, 19:17
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

<div class="block-1">Текст</div>
<div class="block-2">Много текста</div>

.block-1 {float:left; width:100px; background:#ccc;}
.block-2 {background:#ff0;}
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2011, 19:35
Интересующийся
Отправить личное сообщение для Detex Посмотреть профиль Найти все сообщения от Detex
 
Регистрация: 01.03.2011
Сообщений: 14

Спасибо большое, я уже что-то совсем...
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2011, 19:49
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Detex,
НЗЧ
Ответить с цитированием
  #5 (permalink)  
Старый 16.03.2011, 09:08
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Для решения этой задачи недостаточно установить первому блоку обтекание справа (float:left), потому что если во втором блоке действительно будет много текста то мы получим обычное обтекание (логично, неправда ли?). Смотрим пример по ссылке

Поэтому нужно немного усовершенствовать код:


<div class="block-1">Текст</div>
<div class="block-2">Много текста</div>


.block-1 {
	float:left;
	width:100px;
	background:#ccc}
.block-2 {
	border-left:100px solid #ccc;
	background:#ff0}



Я добавил новое правило для второго блока (border-left:100px solid #ccc). Смотрим результат

P.S. Бордюр также может быть прозрачным (transparent).
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2011, 09:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Magneto
Я добавил новое правило для второго блока (border-left:100px solid #ccc).
Обычно добавляют простой отступ.

.block-2 {
   background:#ff0;
   margin-left: 100px;
}
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2011, 10:30
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 19:25
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
при нажатии на картинку(типа кнопки) скрывать и показывать DIV Russianmaniac Элементы интерфейса 4 28.11.2010 00:47
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23
Как "вытащить" div из table linbis Элементы интерфейса 4 27.03.2009 17:57