php正在改变我的图像

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;'的位置 很重要，请参阅关于heredoc字符串的php文档。

php正在改变我的图像

问题描述

4 个解决方案

解决方案1
1 2012-10-31 21:34:36

解决方案2
1 2012-10-31 21:34:44

解决方案3
0 2012-10-31 21:36:08

解决方案4
0 2012-10-31 21:48:24

php正在改变我的图像

问题描述

4 个解决方案

解决方案1 1 2012-10-31 21:34:36

解决方案2 1 2012-10-31 21:34:44

解决方案3 0 2012-10-31 21:36:08

解决方案4 0 2012-10-31 21:48:24

解决方案1
1 2012-10-31 21:34:36

解决方案2
1 2012-10-31 21:34:44

解决方案3
0 2012-10-31 21:36:08

解决方案4
0 2012-10-31 21:48:24