сопоставление ширины элемента контейнера с шириной дочернего элемента - PullRequest
Новая
       12

сопоставление ширины элемента контейнера с шириной дочернего элемента

1 голос
/ 26 сентября 2011

Я хочу иметь такую ​​настройку: 

<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>

jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/

Где btns и block div получают свою ширину в зависимости от содержимого.Точно так же, как это выглядит в скрипке, за исключением того, что ширина btns основана на их тексте, а не на их контейнере

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

Я попробовал несколько разных способов отображения, но не уверен, как это сделать.Я не хочу жестко кодировать любую ширину, так как содержимое будет меняться, и мне нужно, чтобы она работала в более старых версиях IE (хотя я могу использовать библиотеки, такие как IE9.js).

Ответы [ 3 ]

4 голосов
/ 27 сентября 2011

Вот пример того, как размер #block будет соответствовать ширине его самой длинной кнопки: 

#block {
  float: left;
}  

.btn {
  float: left;
  clear: both; 
}

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

Если вы хотите, чтобы кнопки соединились, удалите clear:both из правила .btn.Однако, если вы хотите, чтобы все они были в одной строке, вы должны знать, что они могут быть удалены.Это произойдет, если ширина всех ваших кнопок, добавленных вместе, больше доступной ширины.В этом случае крайняя правая кнопка будет опускаться ниже других кнопок.

Обновление : на основе комментария ОП, вот CSS для стиля ячейки таблицы, где #block и все .btn элементы расширяются до ширины самой широкой кнопки: 

#block {
  display: inline-block;
}  

.btn {
  display: block;
}

Вместе с пример .

0 голосов
/ 27 сентября 2011

делает их плавающими или встроенными, чтобы они не действовали как блоки (ширина не будет 100%).

0 голосов
/ 27 сентября 2011

Где btns и block div получают ширину в зависимости от содержимого.

Я не уверен на 100%, правильно ли я вас понял, но использование display:inline элементов, таких как span s вместо <div> s, должно решить вашу проблему.

...