CODEWITHSUNDEEP
javascripthtmlcss
1BL1ZZARD
1BL1ZZARD

Reputation: 255

Is there a way to do this in CSS?

I'm making an HTML based game. In this game, 5 words are chosen at complete randomness. Everything's fine, the code picks 5 words at random, and displays it on the screen, right?

Well I don't like the way the words end up getting styled, and it pretty much looks like this:

enter image description here

So the goal is to end up making the text look like this.

pretty bad photoshopped goal

So far, I haven't tried anything because I didn't really know what to do, however the only one attempted using was inline-block, and it somewhat helped, but not to the full extent of how I want it. Here is the current source code:

<body>
  <div class="content" id="content">
    <div class="wordBank" id="wordBank">
    </div>
  </div>
  <script src="script.js"></script>
</body>

var wordBank = document.getElementById("wordBank")
// sparing you some of the unneeded stuff, this is just the word array
for (let i = 0; i < 5; i++) {
  wordBank.innerHTML += "<p>" + words[Math.floor(Math.random()*words.length)] + "</p>"
}

    body {
      margin: 0px;
    }
    .content {
      width: 512px;
      height: 512px;
      margin-left: auto;
      margin-right: auto;
      font-family: Arial;
    }
    .wordBank {
      border: 2.5px solid black;
      border-radius: 5px;
      font-size: 24px;
    }

How can I achieve my goal effectively?

Upvotes: 1

Views: 88

Answers (1)

cSharp
cSharp

Reputation: 3169

Try something like this: https://codepen.io/c_sharp_/pen/ZEvjvqg

HTML

<div class="wrapper">
    <span class="item">multiply</span>
    <span class="item even">step</span>
    <span class="item">kiss</span>
    <span class="item even">force</span>
    <span class="item">ago</span>
</div>

CSS

.wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 500px;
}
.even {
    align-self: flex-end;
}

alternatively,

.wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 500px;
}
.wrapper > :nth-of-type(even) {
    align-self: flex-end;
}

The numbers are (obviously) placeholders and fit them as you like.

Upvotes: 5

Related Questions