VPF::Два div'а в ряд, nowrap, IE 6-9 - Форум программистов

Urnix

Дата 19.8.2011, 22:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

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

У меня вопрос к истинным знатокам 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>

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

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

Код


<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 моё решение едет вот таким образом:
user posted image

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

Это сообщение отредактировал(а) Urnix - 19.8.2011, 22:33

0Scrum

Дата 19.8.2011, 23:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Код


<html>
    <head>
    </head>

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

</html>

или так

Код


<html>
    <head>
    </head>

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

</html>

Это сообщение отредактировал(а) 0Scrum - 19.8.2011, 23:57

Urnix

Дата 20.8.2011, 00:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

К сожалению, задача усложнилась.

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

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

Код


<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 (выглядит удовлетворительно)
user posted image

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

А нужно чтобы работало в IE 6-9 :(

Насчет предложенного решения:

Цитата(0Scrum @ 19.8.2011, 23:55

)

0Scrum, такой вариант не подходит:(. Красный див - это символическое обозначение. На самом деле там картинка. Просто выкинуть её посредством display: none; нельзя.
Но, конечно, спасибо за интересный вариант решения.

Это сообщение отредактировал(а) Urnix - 20.8.2011, 00:18

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »