Question

Iv使用php生成图像按钮但由于某种原因图像显示向右移动。我尝试用CSS修复它，但似乎没有帮助。以下是使用的代码以及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;

}

Answer 1

你可能在那里找到了一个类型......

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

div / dir混合你已经走了？

Answer 2

不是真正的PHP问题，因为PHP只是输出HTML。

一个问题是您有多个具有相同ID的元素。将其更改为class。

示例：id="button"应为class="button"。

同时更改CSS以使其与类匹配而不是ID：

#button {应为.button {

另一个原因是你的一些元素是dir而不是div。

我在Chrome的开发工具上提取了它，显示#button_inside的左侧填充为40px。我没有看到它在任何地方定义，但在其上设置样式padding: 0似乎将元素放在适当的位置。在执行任何其他操作之前，请先解决代码问题。

Answer 3

我认为问题出在<dir>标签上。一旦我将它们改为<div>，它们似乎就会排成一行。

此外，<dir>是HTMl 4.01中已弃用的标记，已从HTML 5中删除，因此您确实不想使用它。

Answer 4

尝试类似

的内容

<?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 documentation on heredoc strings。

php正在改变我的图像

4 个答案: