php - 将 php 代码放在 float 的 css 容器中？

Question

我有一个关于 php 和 css 层的问题。

我有以下 php 代码:

session_start(); 
// Retrieve all the data from the table
$SQL = "SELECT * FROM Exodus_planets WHERE login_id = $user[login_id] LIMIT 10";
$result = mysql_query($SQL);

//while ($db_field = mysql_fetch_assoc($result)) {
//print $db_field['planet_name'] . "<BR>";
//print $db_field['location'] . "<BR>";
while($row = mysql_fetch_array( $result )){
    echo " Planet,   ".$row['planet_name'];
    echo " is located at System  ".$row['location'];
    echo "<br> ";
}

它正确地按顺序显示了一个单词 [Planet name] 和一个数字 [System]。

上面的代码显示行中的信息，例如；

行星太阳位于系统 35。行星土星位于系统 30。我只是想让这些信息显示得更好一些。在某种程度上，行星名称显示在背景图像容器的右侧，而系统则显示在另一个可能带有颜色的 Angular 落。....

如何将上述代码放入 float 的 css 容器中？

谢谢。

Answer 1

因为它似乎是行星列表，所以我会使用 HTML 列表。您可以编辑 css 以使其看起来像您想要的那样。

echo ' <ul class="planetList"> ';
while($row = mysql_fetch_array( $result )){
    echo '<li>';
    echo " Planet,   ".$row['planet_name'];
    echo " is located at System  ".$row['location'];
    echo '</li> ';
}
echo '</ul>';

在 CSS 中

ul.planetList {
   display:block;
   float:right;
   background-image:url('yourBackground.jpg');
   background-position:left;  
   background-repeat:repeat-y;
   /* CSS 3 Only */
   background-size:{length of your text}px 100%;
}

您也可以使用表格代替列表。这样，您可以获得行星列的背景，以及位于系统一的另一个背景。

echo ' <table> ';
echo ' <tr><th>Planet</th><th>System</th></tr>';
while($row = mysql_fetch_array( $result )){
    echo '<tr>';
    echo '<td class="planet">' . $row['planet_name'] . '</td>';
    echo '<td class="system">' . $row['location']    . '</td>';
    echo '</tr> ';
}
echo '</table>';

CSS:

table>tr.planet {
   background-image:url('yourBackground.jpg');
   background-position:left;  
}
table>tr.system {
   background-color:#CCFF00;
}