Как я могу разрешить div автоматически устанавливать собственную ширину?

ProgramBox

Как я могу разрешить div автоматически устанавливать собственную ширину?

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Как я могу заставить ширину DIV вести себя так, как она ведет себя, когда float:left установлено, но без установки значения float? width:auto похоже, этого не происходит (в chrome).

Я пытаюсь заставить работать что-то вроде следующего…

 .center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

Ответ №1:

Решение с помощью встроенного блока

Вы могли бы попробовать display: inline-block и посмотреть, работает ли это в вашей ситуации. Однако вы не сможете центрировать его с помощью margin-left: auto amp; margin-right: auto , потому что для этого метода требуется значение ширины.

Если возможно, используйте display: inline-block и установите text-align: center в его контейнере.

 <div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

Решение с использованием Flexbox container div

Оригинальный ответ выше был написан в 2011 году, до того, как был реализован flexbox. Вы можете добиться аналогичного эффекта

 <div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

Решение без контейнера div

Есть другой способ сделать это без родительского элемента.

Установите display в inline-block , чтобы ширина div соответствовала его содержимому.
Используйте position: relative и left: 50% , чтобы расположить его левый край на 50% от содержащегося в нем элемента.
Используйте transform: translateX(-50%) который «сдвинет» элемент влево на половину его собственной ширины.

 .center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

1. хм … это правильно устанавливает ширину, но поля теперь не центрируют div.

2. верно, вот почему я сказал, что вам нужно будет добавить text-align: center к контейнерному div.

3. Я думаю, я могу добавить другую оболочку для text-align , но, если это вообще возможно, я бы предпочел не добавлять другой уровень вложенности. Знаете ли вы какие-либо другие способы центрирования div неизвестной ширины?

4. Я этого не делаю. Это не значит, что ее нет.

5. Это было чрезвычайно полезно. Спасибо за ответ! Я ломал голову над этим в течение нескольких недель, и у меня было действительно дерьмовое исправление; которое плохо масштабировалось.

Ответ №2:

Я думаю, что это работает в наши дни:

 .center
{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

Ответ №3:

Для тех из вас, кто все еще сталкивается с этой проблемой, в настоящее время вы можете справиться с этим с помощью:

 <div>
  <div style="display: table; margin: auto">
    This will expand only as far as it needs to
  </div>
</div>

Вот новая скрипка, основанная на принятом ответе: http://jsfiddle.net/j33qL8pa/1 /

Ответ №4:

<div> s — это блочные элементы. Они занимают всю ширину своих контейнеров. Точка. Точно так же, как <body> или <html>

Ваше правило, приведенное выше, по сути, делает это: div { width:100%; margin:0 auto; } поскольку 100% — это его автоматическое значение.

inline-block сработало бы, но это не будет работать точно так же, как настоящий inline-block элемент.

В принципе…вы не можете сделать это, не установив ширину, не расположив ее.

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

http://www.brunildo.org/test/InlineBlockLayout.html (ссылка находится внизу следующей страницы msdn) http://msdn.microsoft.com/en-us/library/ms530751(v=vs.85).aspx