Два div'а в ряд, nowrap, IE 6-9

Urnix · August 19, 2011

Доброго времени суток.

У меня вопрос к истинным знатокам CSS.

Задача - есть вот такой html-код, который нельзя менять - можно только дописывать в него CSS:


	<div style="
				border: 1px dotted black;
				width: 300px;
			">
			<div style="
					background-color: red;
					height: 19px;
					width: 19px;
			" ></div>
			<div style="
					background-color: silver;
			">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
		</div>

Необходимо получить вот такое:

Вот моя попытка:


<html>

	<head>
	</head>

	<body>
		<div style="
				border: 1px dotted black;
				width: 300px;
				overflow: hidden;
			">
			<div style="
					background-color: red;
					height: 19px;
					width: 19px;
					float: left;
			" ></div>
			<div style="
					background-color: silver;
					white-space: nowrap;
			">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
		</div>
	</body>

</html>

Это решение отлично работает в современных браузерах. Но к сожалению нужно чтобы работало в IE 6+ (и желательно не только в IE).

А вот как раз в IE моё решение едет вот таким образом:

Внимание вопрос - имеет ли задача решение в данной формулировке?

Заранее спасибо.

Edited August 19, 2011 by Urnix

Softlink · August 19, 2011

Внимание вопрос - имеет ли задача решение в данной формулировке?

Задача точно имеет решение.

<div style="border: 1px dotted black; width: 300px; height: 19px; position:absolute;">
        <div style="background-color: red; height: 19px; width: 19px; position:absolute; top:0px; left:0px;" ></div>
        <div style="background-color: silver; width:281px; overflow:hidden; height:19px; white-space: nowrap; position:absolute; top:0px; left:19px;">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
    </div>

Но это хардкод - позиционирование+жесткие размеры. Больше пока ничего не придумалось (уже спать хочется))).

Urnix · August 19, 2011

Задача точно имеет решение.
...
Но это хардкод...

Это конечно решение... формально. Спасибо за попытку))

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

Edited August 19, 2011 by Urnix

Softlink · August 19, 2011

Еще одно сделал решение(inline-block почему-то вылетел из головы сразу)

<div style="border: 1px dotted black; width: 300px; height: 19px;">
        <div style="background-color: red; height: 19px; width: 19px; display:inline-block; vertical-align:top; *display:inline; *zoom:1;" ></div><div style="background-color: silver; height:19px; white-space:nowrap; overflow:hidden; width:281px; display:inline-block; vertical-align:top; *display:inline; *zoom:1;">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
    </div>

Вроде бы работает везде. Посмотрите.

Чтобы не писать два дива в одну строчку:

	<div style="border: 1px dotted black; width: 300px; height: 19px; font-size:0;">
        <div style="background-color: red; height: 19px; width: 19px; display:inline-block; vertical-align:top; *display:inline; *zoom:1;" ></div>
		<div style="background-color: silver; height:19px; white-space:nowrap; overflow:hidden; width:281px; display:inline-block; vertical-align:top; *display:inline; *zoom:1; font-size:16px;">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
    </div>

Edited August 19, 2011 by Softlink

Urnix · August 19, 2011

inline-block

Уже интереснее . Но, к сожалению, у меня в IE поехало

Спасибо за старания, Softlink. Ложись спать Если вспомнишь ещё какую-нибудь фишку на выходных - напиши плиз.

Softlink · August 19, 2011

inline-block
Уже интереснее . Но, к сожалению, у меня в IE поехало
Спасибо за старания, Softlink. Ложись спать Если вспомнишь ещё какую-нибудь фишку на выходных - напиши плиз.

Ага

А где поехало? Можно скрин? Я проверял в ИЕ-тестере и в ИЕ9 в режиме ИЕ7, вроде все на месте.

И еще вопрос в догонку. А доктайп точно присутствует? В вашем примере его не видно совсем.

Edited August 19, 2011 by Softlink

Urnix · August 19, 2011

А где поехало? Можно скрин? Я проверял в ИЕ-тестере и в ИЕ9 в режиме ИЕ7, вроде все на месте.

Поехало в IE9... (Если изменить width:281px; на width:275px; то не едет)

Но дело даже не в этом. Я всё-таки недостаточно полно описал задачу. Есть ещё условие: серое поле должно быть не шире чем текст, а текст может быть коротким. (Вот именно поэтому я не могу жёстко задать ширину серого дива)

С этой задачей с грехом пополам справлялся вот такой код:


<html>

	<head>
	</head>

	<body>

			<div style="
				border: 1px dotted black;
				width: 300px;
				overflow: hidden;
				display: inline;
			">
			<div style="
					background-color: red;
					height: 19px;
					width: 19px;
					float: left;				
			" ></div>
			<div style="
					background-color: silver;				
					white-space: nowrap;
					display: inline;

			">eins, zwei</div>
		</div>

		<br/>
		<br/>

		<div style="
				border: 1px dotted black;
				width: 300px;
				overflow: hidden;
				display: inline;
			">
			<div style="
					background-color: red;
					height: 19px;
					width: 19px;
					float: left;				
			" ></div>
			<div style="
					background-color: silver;				
					white-space: nowrap;
					display: inline;

			">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
		</div>
	</body>

</html>

Результат этого кода:

Chrome (выглядит удовлетворительно)

IE (выглядит неприемлимо)

Извиняюсь, что не сразу это указал - упустил из внимания

Edited August 19, 2011 by Urnix

Softlink · August 19, 2011

А где поехало? Можно скрин? Я проверял в ИЕ-тестере и в ИЕ9 в режиме ИЕ7, вроде все на месте.
Поехало в IE9... (Если изменить width:281px; на width:275px; то не едет)

Очень странно. Еще раз повторюсь. Вы точно про доктайп не забыли?

Последний вариант от меня и все, больше на сегодня не буду экспериментировать (уже совсем поздно)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

</head>
<body>

      <div style="border: 1px dotted black; display:inline-block; *display:inline; *zoom:1; height: 19px; font-size:0;">
        <div style="background-color: red; height: 19px; width: 19px; display:inline-block; vertical-align:top; *display:inline; *zoom:1;" ></div>
        <div style="background-color: silver; height:19px; white-space:nowrap; overflow:hidden;  display:inline-block; vertical-align:top; *display:inline; *zoom:1; font-size:16px;">eins, zwei, drei, vier, funf, sechs, sieben, acht, neun</div>
    </div>
</body>
</html>

В таком виде работает "авто-ширина", в зависимости от наполнения, работает во всех браузерах. ИЕ-тестер+ИЕ9 во всех доступных режимах и современные. Больше я не знаю, что сделать. Если не заработает, то завтра ребята по-опытней наверняка помогут.

Edited August 19, 2011 by Softlink

Urnix · August 19, 2011

Очень странно. Еще раз повторюсь. Вы точно про доктайп не забыли?

Да, действительно дело в доктайпе было.

Последний вариант от меня и все ... работает во всех браузерах.

Softlink, ты волшебник. Не знаю как тебя благодарить). Короче большое человеческое спасибо!

Этот вариант работает именно так как мне надо.

Я правильно понимаю что звёдочка - это хак расчитанный на IE6?

Edited August 19, 2011 by Urnix

Softlink · August 20, 2011

Я правильно понимаю что звёдочка - это хак расчитанный на IE6?

На здоровье

Да, эта звездочка для ИЕ6-7, которые не понимают inline-block.

Sign In

Два div'а в ряд, nowrap, IE 6-9

Question

Urnix

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

Urnix

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Urnix

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Urnix

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Urnix

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information