#html #css #tailwind-css
#HTML #CSS #попутный ветер-css
Вопрос:
lt;div class="w-auto h-30 m-5 overflow-hidden flex justify-center"gt; lt;divgt; lt;img class="object-fit" src="https://fs.easybanners.com/Templates/795/TemplateIcon/795.png" alt="" style="height: 50vh;"gt; lt;button class="bg-indigo-500 rounded absolute transform -translate-y-32 translate-x- px-12" style="transform:translateX(10px);"gt; Contact Us lt;/buttongt; lt;/divgt; lt;/divgt; В настоящее время я использую TailWindCSS. Я пытаюсь сделать что-то вроде баннера для своего демонстрационного сайта зоомагазина. Проблема в том, что кнопка перемещается вниз, когда я добавил атрибут стиля в кнопку о переводе. Кнопка является абсолютной. Может кто-нибудь объяснить, почему это происходит при попутном ветре?
Комментарии:
1. Чего вы действительно хотите достичь?
2. просто используйте bootstrap ig
3. Я хочу сделать кнопку внутри баннера похожей на кнопку, чтобы клиенты могли записаться на прием по уходу за домашними животными.
4. @WebDevDude вопрос касается попутного ветра
5. @WebDevDude Я мог бы это сделать, но я просто буду придерживаться попутного ветра, чтобы сэкономить больше места. Я также использую режим JIT попутного ветра, так что это экономит мне много места. Попутный ветер тоже более настраиваем.
Ответ №1:
Это то, что я сделал до сих пор:
lt;div class="w-auto h-30 m-5 overflow-hidden flex justify-center"gt; lt;div class=""gt; lt;img class="object-fit" src="images/banner/PetShopServicesBanner.png" alt="" style="height: 50vh;"gt; lt;div class="float-right transform -translate-y-14 -translate-x-60"gt; lt;button class="hidden md:block md:w-52 py-2 bg-orange-500 text-gray-900 rounded absolute"gt; lt;pgt; Make a pet groom schedule lt;/pgt; lt;/buttongt; lt;/divgt; lt;/divgt; lt;/divgt;