0
現時点では、Eurovisionソングコンテストと同様のスコアボードを作成しようとしています。コンテナdiv内のdivを2列に整列する
投票プロセス中に国がリストされている2つの列の方法を再作成したいと思います。
これまでは、コンテナdivの左側の部分に単一のファッションコラムで内部（国）のdivをリストすることに成功しました。任意のアイデアをどのように私は1つの列を2つの列に分割することができます：コンテナdivの左側と右側に1つ？私が試してみましたが、これまでに怒鳴る記載されてい
コード：
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>
あなたは好きだろう各国が調整され、投票が正しく行われている2カ国の国々 – Passersby
私はここで 'ul li'と一緒に行きます。この場合に答えるには、内部divの '.list'の正確な幅と高さを指定する必要があります。なぜなら、' div'はブロック要素であるからです。 –