CSS div такой же ширины, как и его содержимое - PullRequest
Новая
       2

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

12 голосов
/ 10 августа 2011

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

Короче говоря, я хочу иметь

, которое будет иметь такую ​​же ширину, как и его содержимое.Я не хочу устанавливать его размер.Я хочу, чтобы он был таким же широким, как его содержимое, которое создается динамически.

Таблица делает это отлично.С

всегда кажется что-то иное, чем я хочу.Никакая опция «переполнения» не делает то, что я хочу.

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

Короче говоря, я хочу

, который работает так же, как и таблица, без необходимости использования таблицы.Конечно, эксперты 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.

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

Ответы [ 4 ]

4 голосов
/ 10 августа 2011

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

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

Example A

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

Example B

<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.

3 голосов
/ 10 августа 2011

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

1 голос
/ 11 августа 2011

Очень просто: плавайте контейнер 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>
1 голос
/ 10 августа 2011

Набор display: inline-block на содержащий div.

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

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

Здесь - более подробный взгляд на block против inline-block.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...