Question

目前我正在努力创建一个类似欧洲歌唱大赛的记分牌。

所以我想重新创建在投票过程中列出国家的两列时尚。

到目前为止，我已经成功地将内部（国家）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>

Answer 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: 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>

以两列方式对齐容器div中的div

1 个答案: