html - 如何在html中垂直排列数据及其值，并将值相加？
问题描述
我想写一个用户会知道的网页，并通过选择不同的选项来计算它的价值。用户可以从“offer rank”中选择一个，从“salary”中选择一个，然后将他们的值相加得到“total”。目前我不担心如何通过 JavaScript 计算“总数”。我只是在处理 html 和 css 部分。
我听从了黄瓜的想法。目前我的代码是：
<style>
* {
box-sizing: border-box;
}
.body{
display: flex;
flex-direction: column;
}
.wrapper {
width: auto;
max-width: 1000px;
display: flex;
border-top: 1px dashed black;
padding: 5px;
}
.values {
flex: 0 0 80%;
display: flex;
}
.value {
flex: 0 0 25%;
padding: 10px;
line-height: 20px;
}
.title {
flex: 20%;
padding: 10px;
}
</style><!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="body">
<div class="wrapper">
<div class="title">BC jobs calculation</div>
<div class="values">
<span class="value"><input type="radio" id="rankA" name="rank" value="25" onchange="getTotal()"> NOC rank A   <br>（include type 0）</b><br><br>     25 marks</span>
<span class="value"><input type="radio" id="rankB" name="rank" value="10" onchange="getTotal()"> NOC
rank B </b><br><br>     10 marks</span>
<span class="value"><input type="radio" id="rankC" name="rank" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
</div>
</div>
<div class="wrapper">
<div class="title">offer rank</div>
<div class="values">
<span class="value"><input type="radio" id="rankA" name="rank" value="25" onchange="getTotal()"> NOC
rank A   （include type 0）</b><br><br>     25 marks</span>
<span class="value"><input type="radio" id="rankB" name="rank" value="10" onchange="getTotal()"> NOC
rank B </b><br><br>     10 marks</span>
<span class="value"><input type="radio" id="rankC" name="rank" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank" value="5" onchange="getTotal()"> NOC rank
D </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankE" name="rank" value="25" onchange="getTotal()"> NOC
rank E   （include type 0）</b><br><br>     25 marks</span>
<span class="value"><input type="radio" id="rankF" name="rank" value="10" onchange="getTotal()"> NOC
rank F </b><br><br>     10 marks</span>
<span class="value"><input type="radio" id="rankG" name="rank" value="5" onchange="getTotal()"> NOC rank
G </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankH" name="rank" value="5" onchange="getTotal()"> NOC rank
H </b><br><br>       5 marks</span>
</div>
</div>
<div class="wrapper">
<div class="title">result</div>
<div class="values">
<span class="value">
calc value
</span>
</div>
</div>
</div>
</html>
</body>
</html>输出应该是这样的：
------------------------------------------------------------------------
offer rank NOC rank A NOC rank B NOC rank C NOC rank D
25 marks 10 marks 5 marks 5 marks
------------------------------------------------------------------------
salary More than 100,000 50 marks 92,500-94,999 36 marks
97,500-99,999 38 marks 90,000-92,499 35 marks
95,000-97,499 37 marks 87,500-89,999 34 marks
...
----------------------------------------------------------------------
total (calculated value)
但是现在的输出并不是我完全期望的。等级 A、B、C、D、E、F、G、H 在同一行。我希望 C 和 D 成为下一行（薪水）。而且我只能从所有选项中选择一项，而不是从offer rank中选择一项，从工资中选择一项。
解决方案
你可以display: flex用来让它看起来像你想要的
wrapper是包含标题和内容
values的类是包含您的选项的类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.body{
display: flex;
flex-direction: column;
}
.wrapper {
width: auto;
max-width: 1000px;
display: flex;
border-top: 1px dashed black;
padding: 5px;
}
.values {
flex: 0 0 80%;
display: flex;
flex-wrap: wrap;
}
.value {
flex: 0 0 25%;
padding: 10px;
line-height: 20px;
}
.title {
flex: 20%;
padding: 10px;
}
</style>
</head>
<body>
<div class="body">
<div class="wrapper">
<div class="title">offer rank</div>
<div class="values">
<span class="value"><input type="radio" id="rankA" name="rank" value="25" onchange="getTotal()"> NOC
rank A   （include type 0）</b><br><br>     25 marks</span>
<span class="value"><input type="radio" id="rankB" name="rank" value="10" onchange="getTotal()"> NOC
rank B </b><br><br>     10 marks</span>
<span class="value"><input type="radio" id="rankC" name="rank" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
</div>
</div>
<div class="wrapper">
<div class="title">offer rank</div>
<div class="values">
<span class="value"><input type="radio" id="rankA" name="rank2" value="25" onchange="getTotal()"> NOC
rank A   （include type 0）</b><br><br>     25 marks</span>
<span class="value"><input type="radio" id="rankB" name="rank2" value="10" onchange="getTotal()"> NOC
rank B </b><br><br>     10 marks</span>
<span class="value"><input type="radio" id="rankC" name="rank2" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank2" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank2" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
<span class="value"><input type="radio" id="rankD" name="rank2" value="5" onchange="getTotal()"> NOC rank
C </b><br><br>       5 marks</span>
</div>
</div>
<div class="wrapper">
<div class="title">result</div>
<div class="values">
<span class="value">
calc value
</span>
</div>
</div>
</div>
</html>
</body>
</html>