php 正在移动我的图像答案

【问题标题】：php is shifting my imagesphp 正在移动我的图像
【发布时间】：2012-11-01 05:48:24
【问题描述】：

我用 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;

}

【问题讨论】：

这似乎更像是Stack Overflow的问题。
这是一个与 PHP 无关的客户端问题。显示你的 HTML，而不是你的 PHP。
<div id="button_inside"> 上似乎有 40px 的左填充，设置style="padding:0px" 自己看看。为了将来的使用，请使用 Firebug 之类的工具来调试与 Javascript、HTML 和 CSS 相关的任何内容。
是的，一个页面上只有 1 个元素可以有相同的 id。

标签： php image css alignment

【解决方案1】：

你可能在那里有一个 type-o....

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

div/dir 混合你准备好了吗？

【讨论】：

【解决方案2】：

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

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

例如：id="button" 应该是 class="button"。

同时更改您的 CSS，使其匹配类而不是 ID：

#button { 应该是.button {

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

我在 Chrome 的开发工具中找到了它，它显示 #button_inside 的左内边距为 40 像素。我没有看到它在任何地方定义，但在其上设置样式padding: 0 似乎将元素放置到位。不过，在做任何其他事情之前，请先解决代码的问题。

【讨论】：

【解决方案3】：

我认为问题在于您的<dir> 标签。一旦我将它们更改为<div>，它们似乎就符合要求了。

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

【讨论】：

【解决方案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 代码的每一部分包装在 <?php ?> 中，并保留 HTML 原样。