Foreach 循环位置无法正常工作

Question

我正在尝试列出已存储在 mysql 数据库中的人，但是只有第一个数据库项的样式正确，而其他项则不合适。我对 css 相当陌生，我可能在 while 循环或定位中犯了一个错误。

https://i.stack.imgur.com/NnYy1.png 图像^^

我使用的代码如下：

<div id="adminsummary">
<div id="admintitel">
<p id="admintext">Admin Overview</p>
</div>
<?php
while ($row = mysqli_fetch_array($result)) {
$steamid = $row["steamid"];
$xml = simplexml_load_file("http://steamcommunity.com/profiles/$steamid/?xml=1");
if (!empty($xml)) {
$username = $xml->steamID;
}
?>
<div id="admin">
<img id="adminimg" src="<?php echo $steamprofile['avatarmedium']; ?>">
<p id="adminname"><?php echo $username; ?></p>
<!--   <p id="adminname"> SteamID: <?php echo $row["steamid"]; ?></p> -->
<p id="adminname"> Rank: <?php if ($row["rank"] == 1) {echo "SuperAdmin";} else {echo "Admin";} ?></p>
<hr id="hr2">
</div>
</div>

样式表：

#adminsummary {
background: white;
margin-top: 5%;
height: 75%;
width: 25%;
margin-right: 5%;
float:right;
border-radius: 25px;
box-shadow: 10px 10px 77px -6px rgba(0,0,0,0.59);
}
#admintitel{
background: #343a40;
border-top-left-radius: 25px;
border-top-right-radius: 25px;

}
#admintext{
color: white;
font-family: sans-serif;
font-weight: bold;
text-align: center;
padding: 25px;
}

#adminimg {
border-radius: 25px;
float: left;
margin-left: 25px;
}

#hr2 {
display: block;
margin-top: 25px;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#adminname {
text-align: left;
font-weight: bold;
margin-left: 25%;
font-family: sans-serif;
}

感谢您抽出宝贵时间帮助我

Answer 1

尝试将类而不是 id 放入divs中，并pwhile循环中。

ID在CSS中是唯一的，这解释了为什么第一行的样式，而不是其他的。

Answer 2

如果修改 HTML 并删除循环中的 ID，则可以将类与子/同级选择器结合使用，以更简洁的方式分配样式

<!-- these IDs are OK as they are unique ( presumably ) -->
<div id="adminsummary">
<div id="admintitel">
<p id="admintext">Admin Overview</p>
</div>
<?php
while ($row = mysqli_fetch_array($result)) {
$steamid = $row["steamid"];
$xml = simplexml_load_file("http://steamcommunity.com/profiles/$steamid/?xml=1");
if (!empty($xml)) {
$username = $xml->steamID;
}
?>
<!-- use classes &/or sibling selectors for cleaner html ~ no duplicate IDs though -->
<div class="admin">
<img src="<?php echo $steamprofile['avatarmedium']; ?>">
<p><?php echo $username; ?></p>
<p> Rank: <?php if ($row["rank"] == 1) {echo "SuperAdmin";} else {echo "Admin";} ?></p>
<hr />
</div>

<?php
}//close loop
?>
</div>

使用子选择器在.admin代码块中分配样式的略微修改的 CSS

#adminsummary {
background: white;
margin-top: 5%;
height: 75%;
width: 25%;
margin-right: 5%;
float:right;
border-radius: 25px;
box-shadow: 10px 10px 77px -6px rgba(0,0,0,0.59);
}
#admintitel{
background: #343a40;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
#admintext{
color: white;
font-family: sans-serif;
font-weight: bold;
text-align: center;
padding: 25px;
}

#adminsummary .admin img {
border-radius: 25px;
float: left;
margin-left: 25px;
}
#adminsummary .admin hr {
display: block;
margin-top: 25px;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#adminsummary .admin p {
text-align: left;
font-weight: bold;
margin-left: 25%;
font-family: sans-serif;
}