2016-09-19 74 views
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>

+0

你會喜歡e值兩個國家的列,哪個國家是左對齊的,他們的選票是否對齊? – Passersby

+0

我會在這裏與'ul li'一起去;但要回答這種情況,您需要爲內部div的'.list'指定確切的寬度和高度,因爲'div'是塊元素。 –

回答

0

讓我知道如果你以下工作:

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: 100%; 
 
    height: 5%; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    color: aquamarine; 
 
} 
 

 
.leftColumn{ 
 
    width:90%; 
 
    float:left; 
 
} 
 
.rightColumn{ 
 
    width:10%; 
 
    float:right; 
 
} 
 
.leftColumn img{ 
 
    float:left; 
 
    height:18px; 
 
} 
 

 
.leftColumn p{ 
 
    margin:0px; 
 
    font-size:15px; 
 
} 
 

 
.rightColumn p{ 
 
    margin:0px; 
 
    text-align:center; 
 
    font-size:15px; 
 
}
<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"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
<div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
     <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
     <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
     <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div> 
 

 
    <div class="list"> 
 
    <div class="leftColumn"><img class="img_right" src="http://www.mdgfund.org/sites/all/themes/custom/undp_2/images/flag/albania.jpg"><p class="p_right">Albania</p></div> 
 
    <div class="rightColumn"><p>28</p></div> 
 
</div>   
 
</div> 
 

 
</body>