0

http://jajuka.net/stark/logo.php

Ivはphpで画像ボタンを生成しましたが、何らかの理由で画像が右にシフトして表示されます。IvはCSSで修正しようとしましたが、それは役に立たなかったようです。これは、使用されているコードivと、cssおよび実際の例です。誰か助けてください。

<?php

    $dirname = "artwork/logo/";

    $images = scandir($dirname);

    shuffle($images);

    $ignore = array(".", "..");

    foreach($images as $curimg){

        if(!in_array($curimg, $ignore)) {
            echo "<div id='button'> <dir id='button_inside'> <img src='".$dirname.$curimg."'> </img> </dir> </dir>";

        }

    }              

?>

// -------------------------- {CSS} ------------------- ---- //

#button {
border: 1px solid #999;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.37);
height: 57px;
width: 57px;
float: left;
background-color: #FFF;
}
#button_inside {
float: left;
border-radius: 14px;
height: 55px;
width: 55px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25);
background: rgb(242,242,242); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,242,242,1) 7%, rgba(255,255,255,1) 21%, rgba(226,226,226,1) 77%, rgba(226,226,226,1) 86%, rgba(254,254,254,1) 94%, rgba(211,211,211,1) 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,rgba(242,242,242,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(77%,rgba(226,226,226,1)), color-stop(86%,rgba(226,226,226,1)), color-stop(94%,rgba(254,254,254,1)), color-stop(98%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */

}



img {
float: left;
height: 40px;
width: 40px;

overflow: visible;

}
4

4 に答える 4

1

あなたはおそらくそこにタイプoを持っています....

<div...><dir...>...</dir></dir>

div/dir のミキシングは進んでいますか?

于 2012-10-31T21:34:36.010 に答える
1

PHPは単にHTMLを出力するだけなので、PHPの質問ではありません。

1 つの問題は、同じ ID を持つ複数の要素があることです。代わりに a に変更しclassます。

例:id="button"である必要がありますclass="button"。

また、ID ではなくクラスに一致するように CSS を変更します。

#button {する必要があります.button {

もう 1 つは、一部の要素がdir代わりにdiv.

Chrome の開発ツールでプルアップしたところ#button_inside、左パディングが 40px であることがわかりました。どこにも定義されていませんが、スタイルpadding: 0を設定すると要素が配置されるようです。それでも、他のことをする前に、まずコードの問題を修正してください。

于 2012-10-31T21:34:44.903 に答える
0

<dir>問題はあなたのタグにあると思います。それらを変更すると<div>、それらは一列に並んでいるように見えました。

また、<dir>HTMl 4.01 の時点で非推奨のタグであり、HTML 5 から削除されているため、実際には使用したくありません。

于 2012-10-31T21:36:08.323 に答える
0

次のようなものを試してください

<?php
foreach(glob("artwork/logo/*") as $f) {
    echo <<<HTML
        <div class="button" style="background-repeat: no-repeat;
             background-image: url('$f');">
        </div>
HTML;
}

「HTML;」の場所に注意してください。ヒアドキュメント文字列に関するphpドキュメントを参照してください。

于 2012-10-31T21:48:24.940 に答える