时间戳

首页 > 解决方案 > 创建响应式 CSS 记分板，其数值紧邻条形左侧

html - 创建响应式 CSS 记分板，其数值紧邻条形左侧

问题描述

我正在尝试使用 HTML 和 CSS 编写一个简单的响应式记分牌。对于每个玩家（总共三个），将有一个条形图（一个具有高度、宽度和背景颜色的 div），以及一个紧邻该条形图右侧的数字分数。

我希望这些栏位于列 flex 容器中。最上面的条将始终占据 flex 容器的整个宽度。然后可以相对于第一个条的宽度设置后两个条的宽度。如果第二个玩家的得分是第一个玩家的一半，那么他们的条形宽度将设置为 50%。

是否可以使用这种方法，同时将数字分数立即定位在条形的右侧？我之前尝试将每个条形图与其对应的数字分数保存在一个 div 中，但准​​确设置条形图的宽度变得非常困难。

这是我现在拥有的代码：

span {
    font-family: Arial, sans-serif;
    color: #7B7B7B;
}

#container {
    height: 100%;
    width: 100%;
    display: flex;
}

#names {
    padding-right: 2%;
    display: flex;
    flex-direction: column;
}

#player1name, #player2name, #player3name {
    font-weight: bold;
    height: 2em;
    line-height: 2em;
}

#bars {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#player1bar, #player2bar, #player3bar {
    height: 2em;
    flex: 1;
}

#player1bar {
    background-color: #4776d2;
    width: 100%;
}

#player2bar {
    background-color: #2a85b6;
    width: 50%;
}

#player3bar {
    background-color: #51636d;
    width: 7.5%;
}

#scores {
    padding-left: 2%;
    display: flex;
    flex-direction: column;
}

#player1score, #player2score, #player3score {
    height: 2em;
    line-height: 2em;
    font-weight: bold;
    text-align: left;
}
<body>
<div id="container">
    <div id="names">
        <span id="player1name">Alice</span>
        <span id="player2name">Bob</span>
        <span id="player3name">Charlie</span>
    </div>

    <div id="bars">
        <div id="player1bar"></div>
        <div id="player2bar"></div>
        <div id="player3bar"></div>
    </div>

    <div id="scores">
        <span id="player1score">10,000</span>
        <span id="player2score">5,000</span>
        <span id="player3score">750</span>
    </div>
</div>
</body>

标签： htmlcssflexbox

解决方案

你的意思是这样的吗？

span {
    font-family: Arial, sans-serif;
    color: #7B7B7B;
}

#container {
    height: 100%;
    width: 100%;
    display: flex;
}

#names {
    padding-right: 2%;
    display: flex;
    flex-direction: column;
}

#player1name, #player2name, #player3name {
    font-weight: bold;
    height: 2em;
    line-height: 2em;
}

#bars {
    flex: 1;

    display: flex;
    flex-direction: column;
}

#player1bar, #player2bar, #player3bar {
    height: 2em;
    flex: 1;
}

#player1bar {
    background-color: #4776d2;
    width: 100%;
}

#player2bar {
    background-color: #2a85b6;
    width: 50%;
}

#player3bar {
    background-color: #51636d;
    width: 7.5%;
}

#scores {
    padding-left: 2%;

    display: flex;
    flex-direction: column;
}

#player1score, #player2score, #player3score {
    height: 2em;
    line-height: 2em;
    font-weight: bold;
    text-align: left;
}

.bars {
    width: 90%;
}

.bar {
    position: relative;
}

.bar span {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    left: 100%;
    padding-left: 10px;
}
<div id="container">
    <div id="names">
        <span id="player1name">Alice</span>
        <span id="player2name">Bob</span>
        <span id="player3name">Charlie</span>
    </div>

    <div class="bars">
        <div class="bar" id="player1bar">
            <div></div>
            <span id="player1score">10,000</span>
        </div>
        <div class="bar" id="player2bar">
            <div></div>
            <span id="player2score">5,000</span>
        </div>
        <div class="bar" id="player3bar">
            <div></div>
            <span id="player3score">750</span>
        </div>
    </div>
</div>

我稍微改变了 html 结构，因为你的那个不容易重新制作。

一个提示，使用更多的类而不是 id。为类编写 css 更容易。

推荐阅读