#html #css
#HTML #CSS
Вопрос:
Я сделал секцию с контейнером и 4 коробками внутри (flexbox с направлением строк). Все было подготовлено. Теперь я хотел бы сделать эти 4 поля кликабельными и установить их в качестве якорей. К сожалению, когда я упаковывал свою коробку , она теряла такие свойства, как ширина. должен ли я изменить свой , или, может быть, это лучший способ сделать мои коробки якорями? Спасибо за ответ
.icon-boxes { display: flex; flex-wrap: no-wrap; margin: 0 -15px; :hover { background-color: #ffede9; } a { text-decoration: none; color: #000; .box { width: calc(100% / 3); padding: 15px 15px; @media (max-width: 800px) { width: 100%; } .icon { margin-bottom: 20px; text-align: center; font-size: 60px; } .title { text-transform: uppercase; text-align: center; margin-bottom: 20px; letter-spacing: 1px; font-weight: 600; } .desc { text-align: center; line-height: 1.4; color: $secondaryColor; } } } } lt;div class="icon-boxes"gt; lt;a href=""gt; lt;div class="box"gt; lt;div class="icon"gt;lt;img src="assets/img/wedding-invitation.png" alt=""gt;lt;/divgt; lt;div class="title"gt;Loremlt;/divgt; lt;div class="desc"gt;Loremlt;/divgt; lt;/divgt; lt;/agt; lt;/divgt; Комментарии:
1. Пожалуйста, не могли бы вы взглянуть на свой вопрос так, как мы его видим, поскольку отсутствуют биты — например: «когда я упаковал свою коробку в», что это значит?
Ответ №1:
Вы можете добиться этого с помощью некоторого javascript. Это сохранит все свойства div, и вам не понадобится якорь.
var d1 = document.getElementById("d1") d1.addEventListener("click",function(){ window.open("https://www.google.com" ,'_blank'); }) .d1{ width:100px; height:100px; background-color:crimson; } lt;div class="d1" id="d1"gt; lt;/divgt;