#html #css
#HTML #CSS
Вопрос:
Я пытаюсь сделать игральные карты с помощью CSS. Я следил за видео на YouTube, чтобы сделать их, и они были в порядке, но теперь я хочу рисовать несколько карт рядом друг с другом, рисуя 1 каждый раз, когда я нажимаю кнопку (я пытаюсь сделать блэкджек для школьного проекта). Проблема в том, что карты будут помещены под предыдущую, и я попробовал немного повозиться с ней, и я думаю, что решил одну из проблем, но я создал другую. Позвольте мне показать вам.
Раньше у контейнера для карт была абсолютная позиция, поэтому я думаю, что это была проблема, но теперь правое нижнее число и масть даже не находятся внутри контейнера, а также он по-прежнему не помещает карты рядом друг с другом. JavaScript, который выполняется, когда я нажимаю кнопку
Я знаю , что есть куча вещей, в которых есть другие проблемы, в основном в JavaScript, такие как индекс всего getClassName , я знаю, как это решить, это то, что я просто не могу понять.
var cardcon = document.createElement('div'); cardcon.className = "card-container"; document.getElementById('gugu').appendChild(cardcon); // var card = document.createElement('div'); card.className = "card"; document.getElementsByClassName('card-container')[0].appendChild(card); // var valuecon = document.createElement('div'); valuecon.className = "value-container container-top"; document.getElementsByClassName('card')[0].appendChild(valuecon); // var valuenumber = document.createElement('div'); valuenumber.className = "value-number"; valuenumber.textContent = "7"; document.getElementsByClassName('value-container container-top')[0].appendChild(valuenumber); // var valuesuit = document.createElement("div"); valuesuit.className = "value-suit"; valuesuit.innerHTML = "amp;#9829"; document.getElementsByClassName('value-number')[0].appendChild(valuesuit); // var valuedon = document.createElement("div"); valuedon.className = "value-container container-bottom"; document.getElementsByClassName('card')[0].appendChild(valuedon); // var valuenumber1 = document.createElement('div'); valuenumber1.className = "value-number"; valuenumber1.textContent = "7"; document.getElementsByClassName('value-container container-bottom')[0].appendChild(valuenumber1); // var valuesuit1 = document.createElement("div"); valuesuit1.className = "value-suit"; valuesuit1.innerHTML = "amp;#9829"; document.getElementsByClassName('value-number')[1].appendChild(valuesuit1); .card-container { position: relative; } .card { width: 250px; height: 350px; border: 3.5px solid gray; border-radius: 12.5px; box-shadow: 10px 10px grey; background-color: white; } .value-container { position: absolute; } .value-number { font-family: 'Abel', sans-serif; font-size: 30px; } .value-suit { font-size: 30px; } .container-bottom { bottom: 8px; right: 16px; transform: rotate(180deg); } .container-top { top: 20px; left: 20px; } .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } lt;div id="gugu" class="grid-container"gt;lt;/divgt; Комментарии:
1. Вы действительно должны разработать свой макет, а затем выяснить, как его написать. Вы добавляете ненужную сложность, поступая таким образом.
Ответ №1:
Я изменил эту часть вашего css, чтобы указать номер внутри вашей карты
.card-container {width:250px;} .card {width:100%;} var cardcon = document.createElement('div'); cardcon.className = "card-container"; document.getElementById('gugu').appendChild(cardcon); // var card = document.createElement('div'); card.className = "card"; document.getElementsByClassName('card-container')[0].appendChild(card); // var valuecon = document.createElement('div'); valuecon.className = "value-container container-top"; document.getElementsByClassName('card')[0].appendChild(valuecon); // var valuenumber = document.createElement('div'); valuenumber.className = "value-number"; valuenumber.textContent = "7"; document.getElementsByClassName('value-container container-top')[0].appendChild(valuenumber); // var valuesuit = document.createElement("div"); valuesuit.className = "value-suit"; valuesuit.innerHTML = "amp;#9829"; document.getElementsByClassName('value-number')[0].appendChild(valuesuit); // var valuedon = document.createElement("div"); valuedon.className = "value-container container-bottom"; document.getElementsByClassName('card')[0].appendChild(valuedon); // var valuenumber1 = document.createElement('div'); valuenumber1.className = "value-number"; valuenumber1.textContent = "7"; document.getElementsByClassName('value-container container-bottom')[0].appendChild(valuenumber1); // var valuesuit1 = document.createElement("div"); valuesuit1.className = "value-suit"; valuesuit1.innerHTML = "amp;#9829"; document.getElementsByClassName('value-number')[1].appendChild(valuesuit1); .card-container { position: relative; width:250px; } .card { width:100%; height:350px; border:3.5px solid gray; border-radius: 12.5px; box-shadow: 10px 10px grey; background-color: white; } .value-container { position: absolute; } .value-number { font-family: 'Abel', sans-serif; font-size: 30px; } .value-suit{ font-size: 30px; } .container-bottom{ bottom: 8px; right: 16px; transform: rotate(180deg); } .container-top{ top:20px; left:20px; } .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } lt;div id="gugu" class="grid-container"gt; lt;/divgt; Ответ №2:
Я не уверен, что понимаю вашу проблему, но это мое решение.
card-container добавить {display : flex} .
amp;amp; card добавить {position : relative} (это делается для исправления чисел, выплывающих из карты)
Комментарии:
1. Добро пожаловать. Вы должны скопировать фрагмент здесь и внести изменения, чтобы продемонстрировать свое решение.
2. Это решило обе проблемы, спасибо!
Ответ №3:
Используйте встроенный блок
lt;divgt; теги по умолчанию используют свойство css display:block; . Это означает, что они автоматически займут всю строку, на которую вы их разместите. Самое простое решение-использовать объект со display:inline-block; свойством. Встроенные блоки обладают всеми теми же свойствами, что и элемент блока, но после этого не происходит автоматического разрыва строки. Таким образом, если ваш код работает правильно во всех других отношениях lt;divgt;s , это исправит вашу проблему без необходимости запутываться, пытаясь манипулировать атрибутами вашей позиции вообще.
Чтобы действительно упростить свой код, просто используйте lt;spangt; теги вместо lt;divgt; тегов для своих карточек, так как по умолчанию они являются встроенными блоками.