如何实现Div横向对齐及总分文本与数字87的左右布局？

Hey there! I see you're trying to get the "Total Score" text split into two lines on the left, with the number "87" aligned on the right—all in a single box. Flexbox is the ideal tool for this modern layout, way more reliable than floats or messy div structures. Let's adjust your code to make this work perfectly:

Modified Code #

<div style="display: flex; align-items: center; justify-content: space-between; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  <strong>Total<br>Score</strong>
  <span id="count" style="font-size: 2em;">87</span>
</div>
<div style="text-align: center; padding: 1em; margin: 1em; background-color: #eee; border-radius: 10px;">
  Rank #1 out of 321
</div>

Key Changes Explained #

• display: flex: Turns the outer div into a flex container, making its direct children (the "Total Score" text and the number) line up horizontally automatically.
• align-items: center: Ensures both the multi-line text and the large number are vertically centered relative to each other, so the whole box looks balanced.
• justify-content: space-between: Pushes the text block to the far left and the number to the far right, creating the clean side-by-side separation you're after.
• I removed the extra wrapper div around the number span—we can style the span directly to keep the markup lean and easy to maintain.

This setup works consistently across all modern browsers, and it's simple to tweak if you want to adjust spacing, colors, or font sizes later.

内容的提问来源于stack exchange，提问作者TinyTiger