连续4个div，中间两个字符串被移位

所以这实际上更多的是一个问题，为什么是这样，而不是我如何解决它。我可以很容易地做一个黑客攻击，只给中间的两个字符串类来正确定位它们，但我想知道为什么，以及我如何正确地修复它。连续4个div，中间两个字符串被移位

继承人图像显示我的意思。所有4个div都有相同的代码，只是不同的图像和文字，中间两个在不同的位置上都有“XXXX players”。

我的继承人HTML和CSS代码：提前

.lp-popular { 
 
    height: 705px; 
 
} 
 
.lp-popular .title { 
 
    margin-top: 91px; 
 
    margin-left: 457px; 
 
} 
 
.lp-popular .game { 
 
    display: inline-block; 
 
    width: 240px; 
 
    height: 383px; 
 
    background-color: rgba(8, 9, 11, 0.5); 
 
    margin-top: 35px; 
 
    margin-left: 6px; 
 
    margin-right: 6px; 
 
} 
 
.lp-popular .game .heart { 
 
    float: left; 
 
    margin-top: 21px; 
 
    margin-left: 20px; 
 
} 
 
.lp-popular .game span { 
 
    float: left; 
 
    margin-left: 12px; 
 
    margin-top: 10px; 
 
    font-weight: 500; 
 
    font-size: 18px; 
 
    color: #ffffff; 
 
} 
 
.lp-popular .game p { 
 
    float: left; 
 
    margin-left: 15px; 
 
    font-family: Arial; 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    color: rgba(255, 255, 255, 0.5); 
 
}

<div class="lp-popular"> 
 
     <img class="title" src="img/lp_popular_header.png"> 
 
     <div align="center"> 
 
      <div class="game"> 
 
       <img src="img/lp_popular_game_lol.png"> 
 
       <img class="heart" src="img/lp_popular_heart_full.png"> 
 
       <span>League of Legends</span> 
 
       <p>4000 Spieler</p> 
 
      </div> 
 
      <div class="game"> 
 
       <img src="img/lp_popular_game_dota.png"> 
 
       <img class="heart" src="img/lp_popular_heart_empty.png"> 
 
       <span>DotA 2</span> 
 
       <p>4000 Spieler</p> 
 
      </div> 
 
      <div class="game"> 
 
       <img src="img/lp_popular_game_csgo.png"> 
 
       <img class="heart" src="img/lp_popular_heart_empty.png"> 
 
       <span>CS:GO</span> 
 
       <p>4000 Spieler</p> 
 
      </div> 
 
      <div class="game"> 
 
       <img src="img/lp_popular_game_hs.png"> 
 
       <img class="heart" src="img/lp_popular_heart_empty.png"> 
 
       <span>Hearthstone</span> 
 
       <p>4000 Spieler</p> 
 
      </div> 
 
     </div> 
 
    </div>

谢谢！

来源

2015-10-17 nn3112337

添加CSS的以下行来清除游戏标题的彩车：

.lp-popular .game p { 
    clear: both; 
}

来源

2015-10-17 11:54:20 Ryan

无需清除这两个已经给出建议。在这种情况下，清理左边的工作完美。 – Akatosh

为什么中间的图像有'XXXX球员的不同位置：原因很简单。请注意，第一张和最后一张图像的字符串长度为17个字符，包括空间[英雄联盟]和10个字符[Heartstone]，这些字符填满了该行可用的整个宽度。但是在中间图像的情况下，字符串长度是6 [DOTA 2]和5 [CS：GO]，这不足以填充该顶行。因此，接下来的文字/字符串会填补这个空白，因此您可以在同一行而不是第二行获得'XXXX players'，尽管它们有相同的css规则。

修复：如@Ryan和@Akatosh就如何解决这一问题，即

.lp-popular .game p { 
    clear: both; 
    // clear: left; 
}

来源

2015-10-17 12:21:18 Lahori

连续4个div，中间两个字符串被移位

回答

相关问题