有没有办法在 CSS 中做到这一点？
1BL*_*ARD 1 html javascript css
我正在制作一个基于 HTML 的游戏。在这个游戏中，5 个单词是完全随机选择的。一切都很好，代码随机选择 5 个单词，并将其显示在屏幕上，对吧？
嗯，我不喜欢这些词最终的风格，它看起来像这样：
所以目标是最终使文本看起来像这样。
到目前为止，我还没有尝试过任何东西，因为我真的不知道该怎么做，但是唯一尝试使用的是内联块，它有点帮助，但没有达到我想要的全部程度。这是当前的源代码：
<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;
}
我怎样才能有效地实现我的目标？
尝试这样的事情： https: //codepen.io/c_sharp_/pen/ZEvjvqg
超文本标记语言
<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;
}
或者，
.wrapper {
display: flex;
width: 100%;
justify-content: space-between;
height: 500px;
}
.wrapper > :nth-of-type(even) {
align-self: flex-end;
}
这些数字（显然）是占位符，可以根据需要进行调整。
- 您甚至不需要跨度上的类， `.wrapper > :nth-of-type(even) {align-self: flex-end; }` 也会做同样的事情。 (2认同)
| 归档时间： |
|
| 查看次数： |
84 次 |
| 最近记录： |