Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2010, 18:25
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

float + nowrap
Стоит задача: вытянуть содержимое .crossbar в одну строку, при этом таким образом, чтобы элемент .image был выровнен по правому краю.

Сделал следующий пример, иллюстрирующий проблему:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
        <title>Float right wrap test</title>

        <style type="text/css">
            .content {
                border: 1px solid #ccc;
                border-collapse: collapse;
            }

            .content td {
                padding: 0;
            }

            .crossbar {
                overflow: hidden !important;
                width: 300px;
                padding: 1px 0;
                line-height: 17px;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .wrap {
                white-space: normal;
            }

            .grey {
                color: #777;
            }

            .image {
                float: right;
                overflow: hidden;
                width:16px;
                height: 16px;
                margin: 0 3px 0 10px;
                background-color: red;
            }
        </style>

        <script type="text/javascript">
        function toggle_wrap() {
            var el = document.getElementById('to-toggle-wrap');
            if (-1 == el.className.indexOf('wrap')) {
                el.className += ' wrap';
            } else {
                el.className = (' ' + el.className + ' ').replace(/ wrap /g, '');
            }
        }
        </script>
    </head>

    <body>
        <button onclick="toggle_wrap()">Toggle Wrap</button>
        <table class="content">
            <tbody>
                <tr>
                    <td><div id="to-toggle-wrap" class="crossbar"><div class="image"></div>Short text<span class="grey"> This is additional looooong text. Long text is looooooooooong and no-wrapped</span></div></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>


1. Если переместить .image в конец td, то он переносится под текст.
2. Из набора IE, FF, Opera только IE8 делает то, что нужно (черт!)
3. Как видно из примера, снятие word-wrap и выставление для .crossbar жесткой высоты проблему решает, но хочется найти решение с резиновой высотой.

Может, у кого-то будут мысли на этот счет?
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2010, 18:43
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Сообщение от e1f
1. Если переместить .image в конец td, то он переносится под текст.
У меня так только в ie.
Может я чё-то не понял).
.crossbar {
                width:0px;
                overflow: hidden !important;
                padding: 1px 0;
                line-height: 17px;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

<td><div id="to-toggle-wrap" class="crossbar"></div>Short text<span class="grey"> This is additional looooong text. Long text is looooooooooong and no-wrapped.This is additional looooong text. Long text is looooooooooong and no-wrapped.</span><div class="image"></div></td>
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2010, 18:48
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

Видимо не поняли, потому что .crossbar обернут вокруг содержимого, а Вы его в начало вынесли Ну и первый пункт тут как замечание, он ни к селу ни к городу. Main target -- это добиться отстутствия переноса при наличии nowrap.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с вёрсткой - свойство float. Flashton Элементы интерфейса 6 30.03.2010 23:43