Я все еще очень новичок в CSS. На протяжении многих лет я управлял макетом, используя вложенные таблицы, которые, как я знаю, все люди CSS говорят мне, что это зло. Я много лет пробовал с помощью CSS, но с самого начала я не мог заставить его контролировать свой макет, как я его хочу.
Короче говоря, я хочу иметь <div> которая будет только такой же широкой, как и ее содержимое. Я не хочу устанавливать его размер. Я хочу, чтобы он был настолько широким, как его содержимое, которое создается динамически.
Таблица делает это отлично. С <div> это всегда кажется чем-то другим, чем я хочу. Нет опции "переполнения" делает то, что я хочу.
Классический пример - когда я хочу создать полностраничный столбчатый макет с левым столбцом, содержащим навигационные ссылки и правую часть, содержащую контент. Я хочу, чтобы левый столбец был как можно более широким, чем навигационные ссылки. Не больше, не меньше. (Навигационные ссылки не являются статичными, они создаются динамически и могут в любой момент изменять размер/длину). И правильный ( "контент" ) столбец должен быть тем, что осталось. Самое главное, когда я делаю экран браузера более широким или более узким, я хочу, чтобы левая колонка была STILL, была бы такой же широкой, как и навигационные ссылки: не больше и не меньше. Я хочу, чтобы содержимое автоматически обертывалось по мере необходимости, если ширина браузера становится слишком узкой. Ни при каких обстоятельствах я не хочу, чтобы текст был затенен или вышел за пределы определенного столбца.
Короче говоря, я хочу <div> который работает так же, как и таблица без необходимости использовать таблицу. Разумеется, эксперты CSS. это можно сделать.... правый? Я задал этот вопрос на других форумах и до сих пор не получил приемлемого ответа.
Или возьмите простой пример, подобный этому (возможно, это легко):
<ul style="background: orange;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Все это так же широко, как и экран браузера. Но я хочу, чтобы он был только таким широким, как самый длинный элемент. Как это сделать с помощью CSS? Я могу положить все это внутри таблицы, как это
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<ul style="background: orange;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</td></tr></table>
... и он делает то, что я хочу. Как это сделать с помощью CSS вместо использования этих "злых" таблиц?
Я попробовал пример miku.
Это не работает (для чего я хочу это делать).
Если бы я сделал длинную длинную навигационную строку длинной строкой вроде
an&nbps;extra&nbps;long&nbps;navigation&nbps;link&nbps;goes&nbps;here&nbps;-&nbps;this&nbps;could&nbps;even&nbps;be&nbps;an&nbps;image!
Я хочу, чтобы левая сторона навигации расширялась по мере необходимости. Я не хочу максимальной ширины. Используя вышеприведенный пример, дополнительная длинная строка будет закрыта "основным" div.
Кроме того, "основной" div должен быть остальной частью ширины браузера, и в этом случае он будет только шириной, чем текст внутри.
