0

各ビデオの下に移動するのではなく、ビデオの各エントリを並べて配置したいと思います。したがって、以下の現在の PHP および HTML コードの画像の例と同様に、「user1」の後の部分は下ではなく右に移動する必要があります (残りの部分も同様です)。

アラインメント

そして、これは私が現在使用しているコードです。私は while ループを使用しており、数時間いじってみましたが、成功しませんでした。誰か助けてくれませんか？

include"core/database/connect.php";

$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";

while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);
$msg .= "<a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li>";
}

$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data

そして私のCSSファイル：

#container .data ul li{
list-style: none;
font-family: verdana;
margin: 5px 0 5px 0;
color: #000;
font-size: 13px;
}

「display: inline-block;」を追加すると 私のcss（それぞれ.data）に、これは私が得るものです：

アラインメント2

テキストの説明は、黒い画像の隣ではなく、その下に配置したいと考えています。

4

2 に答える 2

0

<img>あなたと<div>with クラス.dataを aでラップし、 (見栄えを良くするために)いくつか<div>を追加して、それらを同じ行に配置します。display: inline-block;padding

したがって、コードは次のようになります。

include"core/database/connect.php";

$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";

while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);

$msg .= "<div class='inline'><a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li></div>";
}

$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data

そしてあなたのCSSは次のようになります：

.inline {
    display: inline-block;
}

または、可能であれば、これを.dataクラスに追加します。

.data {
    display:inline-block;
}
于 2013-07-28T13:36:12.253 に答える
0

アイテム自体を表示している場合、次の行：

$msg .= "<a href='index.php'><img src='images...

id 属性を入れてみてください。次のようになります。

$msg .= "<a href='index.php'><img id="nextTo" src='images

次に、CSSで：

#nextTo{
    float: left;
}
于 2013-07-28T13:36:46.520 に答える