0
На данный момент я пытаюсь создать табло, похожее на конкурс песни Евровидение.Выравнивание divs внутри контейнера div в двух столбцах
Так что я хотел бы воссоздать режим двух столбцов, в котором страны перечислены во время процесса голосования.
До сих пор мне удалось перечислить внутренние (country) divs в одной колонке моды в левую часть контейнера 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' здесь; но для ответа на этот случай вам нужно будет указать точную ширину и высоту для '.list' вашего внутреннего div, поскольку' div' является блочным элементом. –