Php 缩放时背景图像也会移动'；t对齐表格中的文本_Php_Html_Css

Php 缩放时背景图像也会移动'；t对齐表格中的文本

php html css

Php 缩放时背景图像也会移动'；t对齐表格中的文本,php,html,css,Php,Html,Css,这就是当前页面的样子：有几个bug我希望你能帮我解决。2个主要的咒语我希望咒语名称与咒语小图标旁边的右边对齐，其次是背景图片，当我缩小网站时，它会向下和向左移动，我希望它始终保持在同一位置现在代码： class spell { function do_spell($spellicon, $spellname, $spelltext, $changeinpower) { echo ' <div class="spellrow"> <table class="spellt

这就是当前页面的样子：有几个bug我希望你能帮我解决。2个主要的咒语我希望咒语名称与咒语小图标旁边的右边对齐，其次是背景图片，当我缩小网站时，它会向下和向左移动，我希望它始终保持在同一位置

现在代码：

class spell {
function do_spell($spellicon, $spellname, $spelltext, $changeinpower) {
echo '
<div class="spellrow">
    <table class="spelltable" cellpadding="0" cellspacing="0">
        <tr>
            <td ><img class="spellimage" src="/abilities/'.$spellicon.'"></td>
            <td class="spellname">'.$spellname.' - </td>
            <td class="spelldesc">'.$spelltext.'</td>
            <td class="changeinpower"><img  src="/icons/'.$changeinpower.'"></td>
        </tr>
    </table>
</div>
   ';
 }
}

一些css：

.spellrow {
 width: 900px;
 padding: 0;
 margin-bottom: 3px;
 background-color: #ffffff;
 box-shadow: 1px 1px #cccccc; }
.spelltable {
 width: 100%;}
.spellimage {
 width: 32px;
 height: 32px;
 padding-left: 5px;}
.spellname {
 white-space: nowrap;
 padding: 0 5px;
 width: 10px;}
.spelldesc {
 font-size: 15px;
 line-height: 1.05em;}
.changeinpower {
 width: 60px;}

 /* And now the img in the background part */

 .season2014
 {
 background-color:#f1f1f1;
 background-image: url('/season_graphic/SEASON2014_2.png');
 background-repeat: no-repeat;
 background-position: 20% 50%;
 background-origin: content-box;
 background-position: fixed; }

<body class="season2014";>

.spellrow{
宽度：900px；
填充：0；
利润底部：3倍；
背景色：#ffffff；
盒影：1px 1px#cccc；}
.拼写表{
宽度：100%；}
.拼写图像{
宽度：32px；
高度：32px；
左填充：5px；}
.拼写名称{
空白：nowrap；
填充：0 5px；
宽度：10px；}
斯佩尔德斯先生{
字体大小：15px；
线高：1.05em；}
.更换电源{
宽度：60px；}
/*现在是背景部分的img*/
.2014年第四季
{
背景色：#f1f1；
背景图片：url（'/season_graphic/SEASON2014_2.png'）；
背景重复：无重复；
背景位置：20%50%；
背景来源：内容框；
背景位置：固定；}

注：代码中的任何错误我都希望你指出，我对网页设计非常陌生，背景移动的问题是背景位置：已修复。此

固定值

无效。尝试使用属性的可用值来获得所需的效果。更多信息请访问

关于名称，我在CSS中没有看到任何

text align:left

，这可能就是您在

.spellname

属性中寻找的内容。但是更重要的是，对齐问题来自宽度，它只是

width:10px

在

.spellname

属性中

由于已将总行宽度固定为

900px

，为什么不一直使用像素来定义所有宽度？像这样：

.spellrow {
    width: 900px;
    padding: 0;
    margin-bottom: 3px;
    background-color: #ffffff;
    box-shadow: 1px 1px #cccccc;
}
.spelltable {
    width: 100%;
}
.spellimage {
    width: 32px;
    height: 32px;
    padding-left: 5px;
}
.spellname {
    white-space: nowrap;
    padding: 0 5px;
    text-align: left;
    width: 150px; /* Adapt to your needs */
}
.spelldesc {
    font-size: 15px;
    line-height: 1.05em;
    text-align: left;
    width: 658px; /* Adapt to your needs */
}
.changeinpower {
    width: 60px;
}

以及相应的HTML代码

<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
    <tr>
        <td class="spellimage">IMG</td>
        <td class="spellname">Name</td>
        <td class="spelldesc">Text with plenty of info here</td>
        <td class="changeinpower">IMG</td>
    </tr>
</table>
</div>


IMG
名称
这里有大量信息的文本
IMG

另一方面，每个项目做一个表格就失去了表格的全部功能：一个项目就是表格的一行。每个类别应该有一个表，每个拼写在相应的表中是一行。

您的

patch.php

文件中是否有

CSS

代码？最好每篇文章只问一个问题，混合不同的问题对于回答来说不是很实际…不，我有单独的css代码文件尝试使用和不使用文本对齐并不重要文本保持不变，关于背景图像，你会建议什么？如果你想你的背景是固定的，使用固定值（像素，em，…）或者调整图像，使默认的

[0,0]

位置正确。关于

文本对齐

，如果正确地应用于

应该可以工作…请参阅文章的编辑：问题是

td

的宽度只有10px。因此其他单元格占据了房间。我已经阅读了编辑。嗯，那你能告诉我最聪明的方法是什么吗？那么宽度应该是多少？使用flexible with it会使拼写描述出错所有内容都有一定宽度的问题是，当拼写名称较短时，拼写名称和描述之间总是有很长的间隔

<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
    <tr>
        <td class="spellimage">IMG</td>
        <td class="spellname">Name</td>
        <td class="spelldesc">Text with plenty of info here</td>
        <td class="changeinpower">IMG</td>
    </tr>
</table>
</div>