Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: ширина div

Invis1ble

25.07.2011 - 22:27

Уважаемые знатоки верстки!
Подскажите плиз кроссбраузерное решение задания ширины div по содержимому дочерних элементов. Т.е. имеется например

<div id="l0_b1">
    <span id="l1_s1">тут контент с неизвестной шириной</span>
</div>

как установить ширину l0_b1 == ширине l1_s1 ?

ПС. Очень желательно без js-хаков.

Спустя 7 минут, 50 секунд (25.07.2011 - 21:35) denash написал(а):

может попробуй поставить width:100%.

Спустя 1 минута, 21 секунда (25.07.2011 - 21:36) Invis1ble написал(а):

если бы все так просто было

Спустя 7 минут, 48 секунд (25.07.2011 - 21:44) denash написал(а):

Задай вопрос сдесь http://hashcode.ru/ быстрее будет

Спустя 2 минуты, 45 секунд (25.07.2011 - 21:47) Winston написал(а):

Цитата (Invis1ble @ 25.07.2011 - 21:27)

задания ширины div по содержимому дочерних элементов

Так при растягивании дочерних эл. и родитель будет тянутся. Или не катит ?

Спустя 6 минут, 31 секунда (25.07.2011 - 21:53) Invis1ble написал(а):

PHPprogrammer
Пример:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            #l0_b1 { background-color: green }
            #l1_s1 { background-color: yellow }
        </style>
        <title>Test</title>
    </head>
    <body>
        <div id="l0_b1">
            <span id="l1_s1">Контент с неизвестной шириной</span>
        </div>
    </body>
</html>

l0_b1 растягивается на ширину страницы, а нужно по ширине l1_s1

Спустя 3 минуты, 54 секунды (25.07.2011 - 21:57) Winston написал(а):

Цитата (Invis1ble @ 25.07.2011 - 21:53)

Пример

Понял.
А если такой стиль придать ?

#l0_b1 { background-color: green; display: inline; }

Спустя 7 минут, 5 секунд (25.07.2011 - 22:04) Invis1ble написал(а):

PHPprogrammer
не, нужен display: block (ну то есть блочный элемент), у меня на этом многое завязано. Поэтому не катит.

Спустя 8 минут, 33 секунды (25.07.2011 - 22:13) Winston написал(а):

Цитата (Invis1ble @ 25.07.2011 - 22:04)

не, нужен dusplay: block

Хм... Интересно.. А JS вообще нельзя? Без него мне кажется невозможно. Или я чего-то не понимаю

Спустя 1 минута, 42 секунды (25.07.2011 - 22:15) Invis1ble написал(а):

PHPprogrammer

Цитата

А JS вообще нельзя? Без него мне кажется невозможно

не уверен, но вроде бы возможно, когда-то видел что-то подобное, но найти не могу

Спустя 10 минут, 41 секунда (25.07.2011 - 22:25) Winston написал(а):

Цитата (Invis1ble @ 25.07.2011 - 22:15)

не уверен, но вроде бы возможно, когда-то видел что-то подобное

Нет, я спрашиваю можно ли опустить это ?

Цитата (Invis1ble @ 25.07.2011 - 21:27)

ПС. Очень желательно без js-хаков.

Спустя 1 минута, 22 секунды (25.07.2011 - 22:27) Invis1ble написал(а):

PHPprogrammer
можно, но с js я и сам знаю, как такое сделать

интересует без него

Спустя 6 минут, 15 секунд (25.07.2011 - 22:33) Winston написал(а):

float: left|right тоже не катит как я понял ?

Спустя 1 минута, 40 секунд (25.07.2011 - 22:35) Invis1ble написал(а):

PHPprogrammer
покажи, что имеешь ввиду

Спустя 2 минуты, 47 секунд (25.07.2011 - 22:37) Winston написал(а):

#l0_b1 { background-color: green; float:left }

Или

#l0_b1 { background-color: green; display: inline-block; }

Но последнее не работает в IE 6, 7

Спустя 5 минут, 2 секунды (25.07.2011 - 22:42) Invis1ble написал(а):

PHPprogrammer

Цитата

#l0_b1 { background-color: green; float:left }

вобщем-то подходит, а как теперь этот блок отцентровать по горизонтали? без float с заданной вручную width у меня стоит margin: 100px auto 0 auto, как сделать теперь?

Спустя 7 минут, 22 секунды (25.07.2011 - 22:50) Winston написал(а):

Может и ахинея но, что если так написать

Свернутый текст

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            #l0_b1 { background-color: green; display: inline-block;}
            #l1_s1 { background-color: yellow; }
        </style>
        <title>Test</title>
    </head>
    <body>
        <div style="text-align: center;">
            <div id="l0_b1">
                <span id="l1_s1">Контент с неизвестной шириной</span>
            </div>
            <div id="l0_b1">
                <span id="l1_s1">Контент с неизвестной шириной</span>
            </div>
        </div>
    </body>
</html>

Спустя 3 минуты, 12 секунд (25.07.2011 - 22:53) Invis1ble написал(а):

PHPprogrammer
не центруется

Спустя 8 секунд (25.07.2011 - 22:53) inpost написал(а):

PHPprogrammer
inline-block в ИЕ7 будет глючить

Invis
А ты <div> замени на таблицу, получишь тот же результат, как раз таблица без указаний ширины будет иметь длину внутренних блоков. в <td> помещаешь <div>, таблица будет такой же длиной как <div>

Спустя 45 секунд (25.07.2011 - 22:54) inpost написал(а):

style="text-align: center;" - ЦЕНТРУЕТ только ТЕКСТ! На блоки не действует, поэтому надо <div align="center"> - будет центровать не только текст, но и внутренние блоки!

Спустя 31 секунда (25.07.2011 - 22:54) Invis1ble написал(а):

inpost
не хочу таблицу принципиально, ты же знаешь, что я к ним неравнодушен

Спустя 21 секунда (25.07.2011 - 22:55) Winston написал(а):

Цитата (inpost @ 25.07.2011 - 22:53)

inline-block в ИЕ7 будет глючить

Я об этом предупредил

Спустя 39 секунд (25.07.2011 - 22:55) Invis1ble написал(а):

The "align" attribute on the "div" element is obsolete. Use CSS instead.

Спустя 3 минуты, 28 секунд (25.07.2011 - 22:59) Invis1ble написал(а):

Цитата

<div align="center"> - будет центровать не только текст, но и внутренние блоки!

для float: left кстати не работает (естественно)

Спустя 8 минут, 7 секунд (25.07.2011 - 23:07) inpost написал(а):

Invis1ble
Вообщем, я тебя не понял

Спустя 1 минута, 52 секунды (25.07.2011 - 23:09) Invis1ble написал(а):

inpost
что именно не понятно? хочу верстать 40ТКО!

семантически верно, без устаревших атрибутов и по возможности без js

Спустя 3 минуты, 47 секунд (25.07.2011 - 23:13) Invis1ble написал(а):

на хэш-коде тоже никто толком ответить не может

Спустя 3 минуты, 45 секунд (25.07.2011 - 23:16) Winston написал(а):

C float никак не отцентрировать, а вот inline-block у меня нормально центрирует

Спустя 1 минута, 40 секунд (25.07.2011 - 23:18) Invis1ble написал(а):

PHPprogrammer
так вы ж с inpost'ом говорите, что inline-block в ишаке глючит
у меня просто нет под рукой ИЕ, чтоб проверить, но я вам верю, поэтому он не походит

Спустя 1 минута, 36 секунд (25.07.2011 - 23:20) Winston написал(а):

Цитата (Invis1ble @ 25.07.2011 - 23:18)

но я вам верю

А мы верим этому

Спустя 3 минуты, 51 секунда (25.07.2011 - 23:23) Invis1ble написал(а):

Цитата

А мы верим этому

тем паче
мде.... печалька.....

Спустя 4 минуты, 1 секунда (25.07.2011 - 23:27) YVSIK написал(а):

Invis1ble тут мона проветрить во всех браузерах ИЕ
один человек хороший порекомендовал
вот ссыль
http://ipinfo.info/netrenderer/index.php

Спустя 54 секунды (25.07.2011 - 23:28) Winston написал(а):

Пока самый рабочий вариант.

Свернутый текст


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            #l0_b1 { background-color: green; display: table; }
            #l1_s1 { background-color: yellow; }
        </style>
        <title>Test</title>
    </head>
    <body>
        <center>
            <div id="l0_b1">
                <span id="l1_s1">Контент с неизвестной шириной</span>
            </div>
            <div id="l0_b1">
                <span id="l1_s1">Контент с неизвестной шириной</span>
            </div>
        </center>
    </body>
</html>

Спустя 1 минута, 14 секунд PHPprogrammer написал(а):

Цитата (YVSIK @ 25.07.2011 - 23:27)

тут мона проветрить во всех браузерах ИЕ

И тут можно

Спустя 7 минут, 45 секунд (25.07.2011 - 23:36) Invis1ble написал(а):

PHPprogrammer

Цитата

Пока самый рабочий вариант.

работает. сделал примерно так:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            #l0_b1 { background-color: green; display: table; margin: 0 auto }
            #l1_s1 { background-color: yellow; }
        </style>
        <title>Test</title>
    </head>
    <body>
        <div id="l0_b1">
            <span id="l1_s1">Контент с неизвестной шириной</span>
        </div>
    </body>
</html>

теперь осталось под ИЕ проверить все (я на локалке работаю, там по эти ссылкам вроде только по url проверить можно), так что пошел я под винду.

Спустя 26 минут, 41 секунда (26.07.2011 - 00:03) Invis1ble написал(а):

В IE 6, 7, 8 - нигде не работает ((

Спустя 1 минута, 58 секунд (26.07.2011 - 00:05) inpost написал(а):

Invis1ble
зачем display:table ? Сразу ставь таблицу

Ну это тоже самое, что если пишут, что eval для php плохо, то нигде в мире его не используют

Если есть возможности реализовать это проще, зачем изобретать велосипед?!

Спустя 3 минуты, 12 секунд (26.07.2011 - 00:08) Invis1ble написал(а):

inpost

Цитата

зачем display:table ? Сразу ставь таблицу

потому что div семантически правильней в данном случае, чем table
и что-то мне подсказывает, что поисковики по разному индексируют контент с такими элементами

Спустя 11 часов, 43 минуты, 3 секунды (26.07.2011 - 11:51) Winston написал(а):

А так покатит ?

Свернутый текст

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            #l0_b1 { background-color: green; display: table; margin: 0 auto }
            #l1_s1 { background-color: yellow; }
        </style>
        <!--[if IE]>
            <style type="text/css">
                #l0_b1 { background-color: green; display: inline;}
                #l1_s1 { background-color: yellow; }
                #wrap { text-align: center; }
            </style>
        <![endif]-->
        <title>Test</title>
    </head>
    <body>
    <div id="wrap">
        <div id="l0_b1">
            <span id="l1_s1">Контент с неизвестной шириной</span>
        </div>
    </div>
    </body>
</html>

Проверял только в IE 8

Спустя 17 минут, 23 секунды (26.07.2011 - 12:08) Invis1ble написал(а):

PHPprogrammer
Именно этот конкретный пример работает в 6 - 8 ИЕ.
Но так как мне надо - работает только в 8.
Что самое веселое - я только что прозрел и понял, что для моей задачи вообще в принципе не подходит такого рода решение

В любом случае, спасибо. Теперь зато знаю, как решается такая задача.

Спустя 2 минуты, 9 секунд (26.07.2011 - 12:11) Winston написал(а):

Цитата (Invis1ble @ 26.07.2011 - 12:08)

я только что прозрел и понял, что для моей задачи вообще в принципе не подходит такого рода решение

Цитата (Invis1ble @ 26.07.2011 - 12:08)

Но так как мне надо - работает только в 8

Как же я люблю создателей IE...

Спустя 9 минут, 1 секунда (26.07.2011 - 12:20) Invis1ble написал(а):

Да, противоречие есть, на первый взгляд

Вобщем смотри: вместо span у меня находятся внутри два блочных элемента.
При некоторых действиях юзверя один из
элементов удаляется, а второй должен оставаться на месте (см. этот топик)
так вот, при решении приведенном тобой и при удалении первого дочернего элемента второй смещается из-за динамической ширины родительского блока. Надеюсь, доступно объяснил

Спустя 6 минут, 32 секунды (26.07.2011 - 12:26) Invis1ble написал(а):

Короче, ну его на фиг все эти костыли, прийдется задавать ширину от фонаря +-

ПС. Пока есть ишак и он не следует рекомендациям W3C заниматься версткой категорически нет желания. Сплошной геморой

Спустя 1 час, 41 минута, 13 секунд (26.07.2011 - 14:07) inpost написал(а):

PHPprogrammer
Почему это вдруг не любишь ИЕ? Ты должен не любить людей, которые категорически не хотят обновлять версии до ИЕ9, к примеру, а всё из-за того, что винда пиратская, поэтому и советов по обновлению нет!
Ты бы открыл ФФ версии 1, или тот же родоначальник - нетскейп, там тоже дофига не работало

Спустя 50 минут, 46 секунд (26.07.2011 - 14:58) SerginhoLD написал(а):

Цитата (inpost @ 26.07.2011 - 11:07)

что винда пиратская, поэтому и советов по обновлению нет!

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

Спустя 10 минут, 20 секунд (26.07.2011 - 15:08) inpost написал(а):

SerginhoLD
Открыл оперу, тебе на весь экран надпись: "вышла новая версия... хотите скачать?", нажимаешь 1 кнопку -вуаля, новая версия.
А теперь у меня Иешуа сборка XP SP3, никогда не появляется надпись о том, что есть новая версия, а всё потому, что в настройках отключены все виды проверок обновлений и предупреждений, что вышли новые версии.

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Быстрый ответ:

Здесь расположена полная версия этой страницы.