Как я могу придать div минимальную ширину, когда он находится внутри другого div?

#html #css

#HTML #css

Вопрос:

У меня есть два DIV.

Div A имеет ширину 100%
Div B находится внутри Div A, у него нет заданной ширины и внутри него есть несколько слов текста

Я попытался установить нижнюю границу для Div B, чтобы текст отображался подчеркнутым. Однако кажется, что Div B расширяет всю ширину Div A. Есть ли какой-либо способ, которым я могу сделать Div B просто шириной текста.

Надеюсь, моя проблема ясна.

Спасибо,

Ответ №1:

Divs — это элементы уровня блока, что означает, что они всегда расширяются до 100% ширины их контейнера.

Если вы хотите просто обвести текст рамкой, оберните его встроенным элементом, таким как span, и примените границу к этому диапазону.

В качестве альтернативы, используйте display:inline для рассматриваемого div, но на самом деле нет смысла использовать div для этой цели

1. Хороший ответ. Если вам нужно дополнение и тому подобное, вам нужно использовать display: inline-block;

2. верно, но в вопросе нет упоминания об этом требовании, поэтому я не упомянул его ради краткости и простоты.

3. Лол, я делал это весь день и продолжаю ругаться за то, что недостаточно сложный :/

4. ха-ха, не позволяйте этим парням одурачить вас, я думаю, что простота почти всегда превосходит изысканность… если только вы не на мероприятии black tie

5. Мои мысли также. Хе-хе, черная полоса.

Ответ №2:

Добавить float: left в Div B. Тогда ширина div будет определяться шириной содержимого внутри; или, другими словами, div будет «сжиматься» до своего содержимого.

Чтобы Div A содержал Div B должным образом, вы также должны добавить overflow: hidden в Div A.

Другой вариант — использовать display: inline-block в Div B. Но в этом случае float проще, потому что display: inline-block требуется некоторая помощь для работы в IE7.

Смотрите: http://jsfiddle.net/Sfg8Y /

1. float немного похоже на прыжки через обручи, нет? inline элементы делают именно то, что мы хотим, без дополнительной разметки или объявлений css.

2. @brad: inline элементы не позволяют добавлять margin-top / margin-bottom (среди прочего). Чтобы решить эту проблему, вам нужно использовать display: inline-block . Мой ответ объясняет, почему проще просто использовать значение с плавающей точкой по сравнению с display: inline-block (для совместимости с IE7). Даже если это займет всего display: inline-block; *display: inline; zoom: 1 , чтобы заставить его работать в IE7. Конечно, он также мог бы согласиться с <span> , что (согласно вашему ответу) является лучшим решением.

Ответ №3:

 <div class="mydiv">content</div>

div.mydiv
{
     display: inline-block;
     padding-bottom: 1px;
     border-bottom: 1px solid #000;
}

Ответ №4:

Используйте display: inline-block для внутреннего div.

 #A { 
  background: #abc;
}

#B {
   background: #cba;
   display: inline-block;
}

 <div id="A">
  <div id="B">
    a few words of text inside
  </div>
</div>