WedX - журнал о программировании и компьютерных науках

Установите цвет фона div в соответствии с длиной текста

У меня есть раздел на веб-сайте, где появляются разные отзывы, а у div есть цвет фона, который хорошо отображается на рабочем столе, но при просмотре на мобильных устройствах текст отзывов длиннее (по вертикали), чем высота фона.

Это класс, который назначен div

.quote{
    background-color: #f7f7f7 !important;
    border: 8px none;
    height: 350px;
    padding: 15px;
}

Теперь я знаю, что высота фиксирована на 350px, но если я изменю ее на 100% или auto, это не сработает. Мне нужно, чтобы фон появлялся, пока появляется текст.

16.03.2015

  • В этих случаях проще, если у нас есть скрипач, но попробуйте применить вертикальное поле. 16.03.2015
  • Что не так с jsfiddle.net/rzp2ro5q? Удаление высоты должно привести к автоматическому масштабированию div. 16.03.2015
  • Добавить переполнение: авто; в .quote, плавающее содержимое не добавляется к высоте. См. jsfiddle.net/vekgx3hq/1. 16.03.2015

Ответы:


1

Если вы хотите, чтобы div был высотой 350px, то вы все делаете правильно. Но вам нужно будет добавить overflow-y: hidden; или overflow-y: auto.

Тем не менее, я предлагаю вам просто изменить height на min-height, если вы хотите, чтобы div рос вместе с текстом.

16.03.2015
  • мне не нужно, чтобы он был 350 пикселей, я буду более чем счастлив удалить его, потому что мне просто нужно, чтобы он закрывал текст на всех устройствах, я попробую упомянутое вами решение и вернусь 16.03.2015
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

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

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]