0
238
ViewsIs there a way to do this in CSS?
So 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:
So the goal is to end up making the text look like this.
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? Any help is appreciated.
1 answers
Answer question0
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.