Два блока в одном при плавающих размерах двух из трех.

pizzZ · March 16, 2010

Привет, в общем имеется задача:

Где контейнер имеет плавающую ширину.

Красный прямоугольник имеет фиксированную ширину.

Блок с текстом имеет плавающую ширину

В первом варианте, случилось чудо, и строка ровно такая чтобы прижать красный блок к контейнеру.

Во втором варианте, текста совсем мало. Поэтому красный блок уезжает вместе с границей блока с текстом влево.

В третьем варианте, текста слишком много, и он опускается на новую строчку, не сгоняя при этом красный блок вниз.

(По идеи если в первом блоке строк много, и красный будет выровнен еще и по вертикале на середину то это будет в обще просто супер. Но об этом приходиться только мечтать.)

Кто нибудь может натолкнет на мысль как это сделать? (Можете код даже не писать. Сам напишу)

s0rr0w · March 16, 2010

Привет, в общем имеется задача:
Кто нибудь может натолкнет на мысль как это сделать? (Можете код даже не писать. Сам напишу)

Красный блок - display: inline-block. Текстовый блок - аналогично

Текстовому блоку поставить max-width. Для этих исходных данных будет достаточно.

Edited March 16, 2010 by s0rr0w

pizzZ · March 16, 2010

Красный блок - display: inline-block. Текстовый блок - аналогично
Текстовому блоку поставить max-width. Для этих исходных данных будет достаточно.

как вычислить max-width если контейнер не имеет заданной ширины? Он в %.

Если задавать max-width тоже в процентах, то в каких? Если красный блок 30px а все остальное текстовый блок

pizzZ · March 16, 2010

Сделал так:


<div style="width:200px;  background-color:#FF9;">	
    <div style="float:left; clear:left; position:relative; padding-right:30px; background-color:#F00">
        12345 67890 12345 67890 12345 67890
        <div style="position:absolute; right:0; top:0; background-color:#3CC">
            1234
        </div>
    </div>
</div>

В opera все ок.

В остальных все тоже ок, но блок obl прижат не полностью к строчке, если строчка состоит из двух строк.

Как сделать чтоб в остальных браузерах было как в опере?

Вот пример:

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

Edited March 17, 2010 by pizzZ

s0rr0w · March 17, 2010

Контейнеру позишин релейтив.

Текстовому блоку паддинг справа на ширину красного блока + отступы + display: inline-block

Красному контейнеру позишин абсолют + top на величину отступа + margin-left

Edited March 17, 2010 by s0rr0w

pizzZ · March 17, 2010

Контейнеру позишин релейтив.
Текстовому блоку паддинг справа на ширину красного блока + отступы + display: inline-block
Красному контейнеру позишин абсолют + top на величину отступа + margin-left

Не могли бы Вы подробнее написать. Я пробую как Вы сказали, и ничего не получается.

Winni · March 17, 2010

а почему бы не уменьшить ширину красного контейнера на ширину зелёного блока?

pizzZ · March 17, 2010

а почему бы не уменьшить ширину красного контейнера на ширину зелёного блока?

Потому что ширина красного блока не фиксирована. А задана в %. А вот зеленый блок имеет фиксированную ширину в 40px

psywalker · March 17, 2010

Чем плох такой вариант?

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
			.wrap { display: inline-block; background: red; position: relative; }
			.right { position: absolute; top: 0; right: 0; background: blue; width: 40px;}
			.left { display: inline-block;padding-right: 40px;}	
</style>


</head>

<body>

	<span class="wrap">
		<span class="right">1234</span>
		<span class="left">12345 67890 12345 67890 12345777 67890</span>
	</span>

</body>
</html>

pizzZ · March 17, 2010

Чем плох такой вариант?

Данный вариант, практически ни чем не отличается от того, к которому я пришел. В опере все ок. А вот в остальных браузерах, если текст переходит на новую строчку, то зеленый блок, прибит не к краю текста. А к правому краю, за щет чего получается большой отступ. А когда таких блоков 10 на странице, и блок зеленый (в нем выводиться количество сообщений) прыгает на разной стороне от текста, получается не очень хорошо.

+ если все зеленые блоки выровнять по правому краю, то получается если новость короткая, а разрешение экрана большое, то получаем что количество комментариев будет расположено очень и очень далеко от новости.

s0rr0w · March 17, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Get it!</title>
 <style type="text/css">
 	.container
 	{
 		width: 300px;
 		position: relative;
 		border: 1px solid #ccc;
 		padding: 10px;
 	}
 	.textBlock
 		{
 			display: inline-block;
 			padding-right: 50px;
 		}
	.redBox
		{
			background: #900;
			width: 40px;
			margin-left: -40px;
			position: absolute;
		}
 </style>

</head>
<body>
	<div class="container">
		<div class="textBlock">
			123 
		</div>
		<span class="redBox">
			11
		</span>
	</div>
</body>
</html>

pizzZ · March 17, 2010

К сожалению не работает.

Я уменьшил ширину до 220

И поменял текст на Белила были очень белыми

Получилось:

В опере самое то. Если убрать отступ 10px то блок redBox будет прижиматься к самому тексту.

В ие, и crome блок redBox уехал за страницу.

В ff блок прилипает не к тексту

s0rr0w · March 18, 2010

Лучше не париться и использовать таблицу.

pizzZ · March 18, 2010

Больше вариантов нет?

psywalker · March 18, 2010

Данный вариант, практически ни чем не отличается от того, к которому я пришел. В опере все ок. А вот в остальных браузерах, если текст переходит на новую строчку, то зеленый блок, прибит не к краю текста. А к правому краю, за щет чего получается большой отступ. А когда таких блоков 10 на странице, и блок зеленый (в нем выводиться количество сообщений) прыгает на разной стороне от текста, получается не очень хорошо.
+ если все зеленые блоки выровнять по правому краю, то получается если новость короткая, а разрешение экрана большое, то получаем что количество комментариев будет расположено очень и очень далеко от новости.

1) А тебе нужно, чтобы правый зелёный блок всегда прижимался к левому тексту?

2) И не важно, сколько будет текста слева, главный блок просто должен тянуться по ширине? Или ведь ты ставишь 220пк кажется?

Вот кстати в этом варианте у меня везде всё одинаково и прилипает, как надо

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
			.wrap { display: inline-block; background: red; position: relative; }
			.right { position: absolute; top: 0; right:0; background: blue; width: 40px;}
			.left { display: inline-block; padding-right: 40px; }	
</style>


</head>

<body>

	<span class="wrap">
		<span class="right">1234</span>
		<span class="left">12345 67890 12345 67890 12345 67890</span>
	</span>

</body>
</html>

Great Rash · March 18, 2010

Так не катит?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		div {
			width: 30%;
			padding: 5px;
			border: 1px solid;
			overflow: hidden;
		}

		div div {
			width: auto;
			border: none;
			overflow: visible;
		}

		.left {
			position: relative;
			float: left;
			margin-right: 60px;
			background: #edffde;
		}

		.right {
			position: absolute;
			top: 0;
			left: 100%;
			width: 50px;
			background: #fdeedf;
		}
	</style>
</head>

<body>

	<div>
		<div class="left">
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			text text text text text text text text
			<div class="right">text</div>
		</div>
	</div>
	<div>
		<div class="left">
			text text text text text text text text
			text text text text text text text text
			<div class="right">text</div>
		</div>
	</div>
	<div>
		<div class="left">
			text text text text text
			<div class="right">text</div>
		</div>
	</div>

</body>
</html>

pizzZ · March 18, 2010

Проблема решена. Изменили размер зеленого блока по высоте, и сделали его inline-block

psywalker · March 18, 2010

Проблема решена. Изменили размер зеленого блока по высоте, и сделали его inline-block

Покажи весь код

pizzZ · March 18, 2010

Так не катит?

Ваш способ работает так же как и все остальные. Но кода больше

Спасибо за затраченное время.

Наверное Вы не видите проблему. Сейчас попробую объяснить.

Если блок с текстом, занимает одну строчку то все ок. Но если он переноситься на вторую строку, то между ним и блоком с счетчиком появляется расстояние = слову после переноса, в опере такого нет, и там такого расстояния не появляется.

Покажи весь код

Что то типа:


<div>
     <a href="">Блок с датой</a>
     <a href="">Блок с текстом</a> <a href="">счетчик</a>
</div>

Только все равно проблема есть, на новую строчку прыгает счетчик если не влазиет. И не помогает.

Сейчас буду пробывать делать таблицей.

Edited March 18, 2010 by pizzZ

psywalker · March 18, 2010

Что то типа:


<div>
     <a href="">Блок с датой</a>
     <a href="">Блок с текстом</a> <a href="">счетчик</a>
</div>

Нуу, а ЦСС?

pizzZ · March 18, 2010

Нуу, а ЦСС?

все float:left

Sign In

Два блока в одном при плавающих размерах двух из трех.

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information