How can I get playing cards next to each other with CSS?-CodePudding

I am trying to make playing cards using CSS. I followed a YouTube video to make them and they were fine, but now I want to draw multiple cards next to each other, drawing 1 every time I click a button (I am trying to make Blackjack for a school project). The problem is that the cards will be placed under the previous one, and I have tried fiddling with it a bit and I think I have solved one of the issues but I have created another one. Let me show you.

Before, card-container had position absolute which is why i think was a problem, but now the bottom right number and suit is not even inside the container, also it still doesn't place the cards next to each other. JavaScript that is executed when I click a button

I know that there is a bunch of stuff that there are other problems mainly in the JavaScript like the index of all getClassName, I know how to solve that, this is what I just cant figure out.

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 = "&#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 = "&#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;
}

<div id="gugu" class="grid-container"></div>

CodePudding user response：

I have changed this part of your css to put down number inside your card

.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 = "&#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 = "&#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;
  }

<div id="gugu" class="grid-container">
</div>

CodePudding user response：

I'm not sure if I understand your problem but this is my solution.

to card-container add {display : flex}.

&& to card add {position : relative} (this is to fix the numbers floating out of the card)

CodePudding user response：

Use an Inline-Block

<div> tags use by default the css property display:block;. This means that they will automatically claim the entire row that you place them on. The simplest solution is to use an object with the display:inline-block; property. Inline-blocks have all of the same other properties as a block element, but there is no automatic line-break that happens after it. So, if you got your code working right in all other respects using <div>s doing this will fix your problem without having to get messy trying to manipulate your position attributes at all.

To really simplify your code, just use <span> tags instead of <div> tags for your cards since these are inline-blocks by default.