Подтвердить что ты не робот

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

У меня есть div, в котором пользователь вводит текст. Но я хочу увеличить его ширину в соответствии с текстом до 50% экрана. Мой код CSS:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
}

Результат: enter image description here

После сообщения "555" много места, я хочу этот размер только в том случае, если пользователь вводит некоторый текст:

enter image description here

Итак, как увеличить динамическую ширину div в зависимости от размера текста?

4b9b3361

ОТВЕТЫ

Ответ 1

Есть много способов добиться этого, но ИМХО - самое чистое. Ваша проблема в том, что ящики являются "жадными" и будут пытаться расширить доступную ширину.

Чтобы предотвратить это, вы можете:

  • Сделайте это "float: left;"
  • Но также "clear: left;" чтобы дополнительные "левые плавающие элементы" не использовали свободное пространство справа.

CSS становится:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
   float:  left;
   clear: left;
}

Я предоставил полный код и дополнительное объяснение (на mouseover) на Liveweave здесь: http://liveweave.com/DFCZFj

LiveWeave screenshot

Ответ 2

Попробуйте изменить тип display div на table.

Пример здесь

.messages {
   display: table;
   max-width: 50%;
   min-width: 150px;
   /* other declarations omitted due to brevity */
}

Ответ 3

Просто добавьте display:inline;. Вы также можете удалить свойство min width, иначе, если текст будет меньше, у вас все еще будет этот пробел.

Ответ 4

Элементы блока (div тип отображения по умолчанию) попытается выполнить максимальное горизонтальное пространство контейнера. Представьте себе неявный width:100% всякий раз, когда вы их видите. inline-block создаст элементы уровня блока, в которых следующий элемент попытается отобразить горизонтально смежные (при условии, что будет достаточно места). Это то, что вы хотите использовать (display: table будет работать и в этом решении, но у него есть свои особенности. Я избегаю их.

Итак, ваше решение требует трех частей:

Сначала вам нужно указать, что строки будут не больше 50% доступной области. Вы сделаете это с внешним фреймом:

.frame {
  max-width:50%;
}

Затем самим сообщениям должно предоставляться пространство в целом по каждой строке. Таким образом, мы будем использовать тег div, который не был декодирован вокруг каждого сообщения.

Наконец, вы будете использовать display: inline-block для ваших внутренних messages элементов. Поскольку они являются единственным дочерним элементом их родительского тега, вам не придется беспокоиться об элементах, обматывающих друг друга. Используя встроенный блок, ширина соблюдается, и это дает нам отличное место для применения цвета фона.

.messages {
  display: inline-block;
  min-width: 150px;
  background: #ffeec0;
  padding:2px;
  margin:3px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border:1px solid #ffdd7c;  
}

В качестве ссылки можно ожидать, что ваша разметка будет выглядеть следующим образом:

 <div class="frame">
  <div><div class="messages">2014</div></div>
  <div><div class="messages">2014</div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555
  </div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
   text
  </div></div>
 </div>

Я думаю, вы обнаружите, что это дает вам предполагаемый эффект. Кстати, это общее решение, но если вы выберете min-width, который больше, чем 50%, вы убедитесь, что два родных брата типа inline-block будут слишком широкими для строки. Если вы сделаете это, вы можете отказаться от дополнительного div в разметке.