Блог

Главная - Вопросы по программированию - Как получить встроенные строки, которые фоном охватывают только содержимое и сохраняют интервал

Как получить встроенные строки, которые фоном охватывают только содержимое и сохраняют интервал

#html #css #tailwind-css

#HTML #css #tailwind-css

Вопрос:

Живой код:https://codepen.io/matthewharwood/pen/GRZqRRx?editors=1000

Вопрос: Как мне удалить этот белый bg и просто сделать так, чтобы bg охватывал его по ширине содержимого отступ?

введите описание изображения здесь

 <div class="container">
    <div class="grid grid-cols-3 gap-20">
      <div class="h-0  pt-full relative">
        
        <div class="inset-0 absolute w-full h-full rounded-full overflow-hidden">
          <img  src="https://res.cloudinary.com/morningharwood/image/upload/f_auto,q_auto/samples/people/smiling-man.jpg" class="object-cover h-full" />
        </div>
              
        <div class="absolute bottom-20-p left-half">
            <p class="bg-white text-black px-2 py-1 mb-2 whitespace-no-wrap">Matthew harwood</p>
            <p class="bg-white text-black px-2 py-1 whitespace-no-wrap">Front-end</p>
        </div>
     
      </div>

  </div>
</div>

Комментарии:

1. Попробуйте установить display: inline-block значение 2-го p . nimb.ws/zOBNqH

Ответ №1:

Добавьте это в свой css:

 .whitespace-no-wrap {
/* white-space: nowrap; */
display: inline-block;

}

Ответ №2:

Нет необходимости изменять CSS, используя классы talwind:

 .pt-full {
  padding-top: 100%;
}
.bottom-20-p {
  bottom: 20%;
}

.left-half {
  left: 50%;
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css">
<div class="container">
    <div class="grid grid-cols-2 gap-20">
      <div class="h-0  pt-full relative">
        
        <div class="inset-0 absolute w-full h-full rounded-full overflow-hidden">
          <img  src="https://res.cloudinary.com/morningharwood/image/upload/f_auto,q_auto/samples/people/smiling-man.jpg" class="object-cover h-full" />
        </div>
              
        <div class="absolute bottom-20-p left-half flex flex-col items-start">
            <p class="bg-white text-black px-2 py-1 mb-2 whitespace-no-wrap">Matthew harwood</p>
            <p class="bg-white text-black px-2 py-1 whitespace-no-wrap">Front-end</p>
        </div>
     
      </div>

  </div>
</div>