CSS div настолько же широкий, как и его содержимое

Я все еще очень новичок в CSS. На протяжении многих лет я управлял макетом, используя вложенные таблицы, которые, как я знаю, все люди CSS говорят мне, что это зло. Я много лет пробовал с помощью CSS, но с самого начала я не мог заставить его контролировать свой макет, как я его хочу.

Короче говоря, я хочу иметь <div> которая будет только такой же широкой, как и ее содержимое. Я не хочу устанавливать его размер. Я хочу, чтобы он был настолько широким, как его содержимое, которое создается динамически.

Таблица делает это отлично. С <div> это всегда кажется чем-то другим, чем я хочу. Нет опции "переполнения" делает то, что я хочу.

Классический пример - когда я хочу создать полностраничный столбчатый макет с левым столбцом, содержащим навигационные ссылки и правую часть, содержащую контент. Я хочу, чтобы левый столбец был как можно более широким, чем навигационные ссылки. Не больше, не меньше. (Навигационные ссылки не являются статичными, они создаются динамически и могут в любой момент изменять размер/длину). И правильный ( "контент" ) столбец должен быть тем, что осталось. Самое главное, когда я делаю экран браузера более широким или более узким, я хочу, чтобы левая колонка была STILL, была бы такой же широкой, как и навигационные ссылки: не больше и не меньше. Я хочу, чтобы содержимое автоматически обертывалось по мере необходимости, если ширина браузера становится слишком узкой. Ни при каких обстоятельствах я не хочу, чтобы текст был затенен или вышел за пределы определенного столбца.

Короче говоря, я хочу <div> который работает так же, как и таблица без необходимости использовать таблицу. Разумеется, эксперты CSS. это можно сделать.... правый? Я задал этот вопрос на других форумах и до сих пор не получил приемлемого ответа.

Или возьмите простой пример, подобный этому (возможно, это легко):

Все это так же широко, как и экран браузера. Но я хочу, чтобы он был только таким широким, как самый длинный элемент. Как это сделать с помощью CSS? Я могу положить все это внутри таблицы, как это

... и он делает то, что я хочу. Как это сделать с помощью CSS вместо использования этих "злых" таблиц?

Я попробовал пример miku.
Это не работает (для чего я хочу это делать).

Если бы я сделал длинную длинную навигационную строку длинной строкой вроде

Я хочу, чтобы левая сторона навигации расширялась по мере необходимости. Я не хочу максимальной ширины. Используя вышеприведенный пример, дополнительная длинная строка будет закрыта "основным" div.

Кроме того, "основной" div должен быть остальной частью ширины браузера, и в этом случае он будет только шириной, чем текст внутри.

Ответы

Ответ 1

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

Боковая панель будет такой же широкой, как и самая длинная ссылка (или что-то там) (в приведенном ниже примере есть список)
Если какой-либо контент на боковой панели превышает максимальный, указанный свойством max-width (здесь: 200px), он завершается.
Основное содержимое занимает оставшуюся ширину.

Изменение размера #main div (путем изменения размера окна браузера) работает через overflow:hidden.

<html><head></head><body>

<div id="sidebar-left" 
    style="background:#EFEFEF; max-width:200px; float:left">
    <ul>
        <li>Navigation 1</li>
        <li>Navigation 2</li>
        <li>Extra Long Navigation item, 
            that exceeds our limit of 200px - and should be wrapped</li>
    </ul>
</div>

<div id="main" style="background:gray; overflow:hidden;">
    <p>Hello there - main content goes here</p>
</div>

</body></html>

Если вы не хотите боковую панель максимального размера, просто отбросьте атрибут max-width.

Ответ 2

Используйте <span> и display: inline-block.

Ответ 3

Установите display: inline-block в содержащую div.

Пример: http://jsfiddle.net/bVRVb/

Что происходит, так что div по умолчанию: display: block, что означает, что они будут занимать столько горизонтального пространства, сколько доступно, и сделать все остальное вокруг них выше или ниже них. С inline-block они все еще имеют фиксированную форму, но будут отображаться рядом с вещами вокруг них и занимать только столько места, сколько им нужно.

Здесь более подробно рассмотрим block vs inline-block.

Ответ 4

Очень просто: поплавьте контейнер div и убедитесь, что он не имеет атрибутов ширины вообще. Он будет изменять размер до самого длинного слова независимо от ширины родителя. Поскольку он будет изменять размер элемента за пикселем, я добавил маркер 10 пикселей. Лучше, чтобы контейнер сделал это, конечно.

Вот он, в строке для демонстрационных целей:

<body style="width: 500px;">
<ul style="background: none repeat scroll 0pt 0pt orange; float: left;">
<li>one</li>
<li>two</li>
<li style="margin-right: 10px;">reallyreallyreallylongword</li>
</ul>
</body>