LINUX.ORG.RU

Мастерам верстки

 


0

1

Вот код:

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#main {
				width: 800px;
				padding: 10px;
				background-color: yellow;
			}
			
			img {
				float: left;
				margin: 20px;
			}
			
			#block {
				background-color: green;
				margin: 10px;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<img src="http://jmule.ru/files/images/RPp8xplmPnmczGhctrla"> 
			Какой-то текст  Какой-то текст  Какой-то текст  Какой-то текст
			Какой-то текст  Какой-то текст  Какой-то текст  Какой-то текст
			Какой-то текст  Какой-то текст  Какой-то текст  Какой-то текст
			<div id="block">
				Более другой какой-то текст Более другой какой-то текст
				Более другой какой-то текст Более другой какой-то текст 
			</div>
		</div>
	</body>
</html>

Вот результат.

А я хочу чтоб зелененький див не уходил за изображение, а на уровне своего текста отступал от изображения. Возможно ли? Эни айдиас?

★★★

Забульбень еще один div.

Eddy_Em ☆☆☆☆☆ ()
Ответ на: комментарий от Eddy_Em

Эдак и я умею. А ты Мурку без лишнего попробуй!

pihter ★★★ ()
Ответ на: комментарий от Eddy_Em

О! От поэтому Ты и — генерал! Прокатило!

Спасибо

pihter ★★★ ()
Ответ на: комментарий от Eddy_Em

Вот же хохма. Сначала они верстали таблицами и всех все устраивало. Потом они сказали, что таблицы это каменный век и начали верстать на дивах, где особенные места разбавляли костылями, называя их высшим пилотажем. А потом! Оооо! Они вернули таблицы через display!

deep-purple ★★★★★ ()
Ответ на: комментарий от Eddy_Em

хм... хотя так тоже не айс: оно теперь не заполняет всю ширину родительского контейнера в случае, если не хватает длины текса.... придется, по-ходу, вложенный див :(

pihter ★★★ ()
Ответ на: комментарий от pihter

Да запили ты таблицу, чего с этими идиотскими дивами мучиться?

Eddy_Em ☆☆☆☆☆ ()

Зеленому блоку напиши в стилях overflow: hidden;

stasov1 ()

Вписывай overflow: hidden; для блока. Да и для #main можно.

С float-ами такое постоянно делать приходится.

risenshnobel ★★★ ()
Ответ на: комментарий от deep-purple

Нужен еще один тэг, типа таблицы, но только без tbody, tr, просто <row><col></col><col></col><col></col></row>. Да, это можно сделать через inline-block, но не все. Таблица это просто уникальный элемент )

gobot ★★★ ()
Ответ на: комментарий от gobot

Нужен еще один тэг, типа таблицы, но только без tbody, tr, просто <row><col></col><col></col><col></col></row>

И зачем нужен этот лисапед если уже есть <tr><td></td><td></td><td></td></tr>? <col>, кстати, тоже есть.

h578b1bde ★☆ ()
Ответ на: комментарий от gobot

без tbody, tr, просто <row><col></col><col></col><col></col></row>

Ты хочешь display: flex;

deep-purple ★★★★★ ()
Ответ на: комментарий от gobot

Таблица — уникальный по своему уродливому поведению элемент, тот самый, что «идёт в ногу, а все остальные не в ногу». Нормальный grid layout нужен.

anonymous ()
Ответ на: комментарий от h578b1bde

Ты забыл еще table, а если совсем быть правильным то и tbody, а это лишняя писанина

gobot ★★★ ()
Ответ на: комментарий от gobot

Ты забыл еще table, а если совсем быть правильным то и tbody, а это лишняя писанина

Один „лишний” тег погоды не сделает, а tbody необязателен. Кроме того непонятно как ты собрался разграничивать две таблицы между собой в своём велике.

h578b1bde ★☆ ()
Последнее исправление: h578b1bde (всего исправлений: 2)
Ответ на: комментарий от gobot

tbody в HTML сериализации опционален, но в DOM он будет присутствовать.

anonymous ()

Если не делать доп. div-ов, то рассуждаем так: img участвует в нормальном потоке, т.е., следующий за ним div (id=block) располагается ниже и левее. Чтобы этого не происходило, нужно выключить img из нормального потока:

img {
  // float: left; -- не нужно
  position: absolute;
  top: 0;
  left: 0;
}
Получаем по сути то же самое, только без влияния img на другие элементы. Поэтому нам нужно самостоятельно задать им смещение:

#main { padding-left: 180 px; }
iVS ★★★★★ ()
Последнее исправление: iVS (всего исправлений: 1)
Ответ на: комментарий от pihter

Гм... действительно, ларчик открывается совсем просто! Мое решение можно не засчитывать.

iVS ★★★★★ ()
Ответ на: комментарий от deep-purple

Да это бред. Таблицы - для табличных данных. Дивы - для всего что угодно. Display: block - это не аналог таблицы и прямоугольный див это тоже не таблица. А тот, кто это не понимает - тем быстро читать доки твиттер бутстрапа для начала.

menangen ★★★★★ ()
Ответ на: комментарий от menangen

Таблицы - для табличных данных. Дивы - для всего что угодно

Ты высрал про семантику, когда речь идет про CSS. Что есть див? Что есть таблица? Ложки не существует. Я тебе на одних спанах могу сплясать.

твиттер бутстрап

Положи какашку на место.

deep-purple ★★★★★ ()
Ответ на: комментарий от deep-purple

Твоих ложек и таблиц в твоей голове не существует, весь остальной мир разобрался что и где использовать. Спаны твои по дефолту инлайн, а дивы блочные, отсюда и копай...

menangen ★★★★★ ()
Ответ на: комментарий от menangen

весь остальной мир разобрался что и где использовать

<span style="display: block;"></span>

Можешь еще в какашке попробовать, будет тот же эффект:

<span class="row"></span>

deep-purple ★★★★★ ()
Ответ на: комментарий от deep-purple

И? Ты можешь все эти классы запихнуть в любые теги, это не говорит о том, что бутстрап говно. Перед кодингом нужно читать документацию: w3c, MDN - там всё написано, где что использовать и зачем. А не лезть рукой в сраку.

menangen ★★★★★ ()
Ответ на: комментарий от deep-purple

Коль у каждого свое разрешение, далеко на таблицах не уедешь. Дизайн должен быть максимально гибким. Хотя, с приходом в массы бутстрапа, мы снова вернулись де-факто к табличной верстке.

iVS ★★★★★ ()
Последнее исправление: iVS (всего исправлений: 1)
Ответ на: комментарий от maxlime

SEO продвижения

Убивать!

вес сайта меньше

4.2! Таблицей явно меньше будет, чем ненормальную css раздувать.

код менее избыточен

Ога, ога. ТЫ еще скажи, что код понятен... С таблицей сразу в исхдонике понятно, что как будет выглядеть, а с дивами пока в браузере не откроешь, хрен поймешь!

Eddy_Em ☆☆☆☆☆ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.