0
目前我正在嘗試創建類似於歐洲歌唱大賽歌曲比賽的記分牌。以兩列方式對齊容器div內的div
因此,我想在表決過程中重新列出國家列出的兩列時尚。
到目前爲止,我已成功地將單個時尚列中的內部(國家)div列出到容器div的左側部分。任何想法如何將單列分成兩列:一列在容器div的左側,另一列在右側?我迄今試圖
守則羅列如下:
body {
background-image: url(background.jpg);
background-size: 1900px 1080px;
}
#top {
height: 15%;
width: 70%;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 3%;
background-color: azure;
opacity: 0.1;
}
#main {
height: 80%;
width: 70%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
top: 20%;
background: rgba(134, 34, 87, .5);
display: flex;
flex-flow: column wrap;
justify-content: space-around;
}
.list {
display: inline-flex;
background: black;
width: 20%;
height: 5%;
font-weight: bold;
font-size: 20px;
color: aquamarine;
}
.img_right {
margin-right: 10px;
border-bottom: 20px;
}
.p_right {
margin-right: 120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EUROVISION VOTING BOARD</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="top"></div>
<div id="main">
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
<div class="list">
<img class="img_right" src="assets/Albania.png">
<p class="p_right">Albania</p>
<p>28</p>
</div>
</div>
</body>
</html>
你會喜歡e值兩個國家的列,哪個國家是左對齊的,他們的選票是否對齊? – Passersby
我會在這裏與'ul li'一起去;但要回答這種情況,您需要爲內部div的'.list'指定確切的寬度和高度,因爲'div'是塊元素。 –