Question

我在使用我的CSS页面时遇到问题，它应该是一个几乎是白色的背景，它不会在我的课堂上显示。我的代码：

<div id="content">
<?php
$query="SELECT * FROM softwares ORDER BY Idsoft DESC LIMIT 5";
$result=mysqli_query($ligabd,$query);
while ($rows=mysqli_fetch_array($result))
{

$id=$rows["Idsoft"];
$a1=$rows["nome"];
$a2=$rows["marca"];
$a3=$rows["preco"];
$a4=$rows["stock"];
$a5=$rows["img"];
?>
<div class="img">

<a href="productprofile.php?id=<?php echo $id; ?>">

  <img src="<?php echo $a5;?>"  width="110" height="90">
  <div class="desc"><?php echo "".$a2." - ".$a1.""?></div>

</a>
</div>

<?php
}

?>
</div>

这里是我的css：

 #content
{
    width: 500px;
width: 80%;
height:1000;
margin: 0 auto 0 auto;
background-color:#999
overflow:hidden;
background-size:1980px 1080px;
}

和图像图块：

   div.img
   {
   margin:5px;
   padding: 5px;
   border:1px solid #0000ff;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
   }
   div.img img
   {
   display:inline;
   margin:5px;
   border:1px solid #ffffff;
   }
   div.img a:hover img
   {
   border:1px solid #0000ff;
   }
   div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:5px;
   }

我的问题是内容中的背景应该出现在类下面，但我不能使它工作，已经尝试过而不是使用一个使用id的类但我不能格式化。谁会帮助我，我将不胜感激！

Answer 1

你的CSS：

#content {
    width: 500px;
    width: 80%; //Why multiple declaration?
    height:1000; //Forgot unit i.e px or %
    margin: 0 auto 0 auto;
    background-color:#999 //Missed semicolon
    overflow:hidden;
    background-size:1980px 1080px; //Consider removing it if you aren't using background image.
}
div.img {
    margin:5px;
    padding: 5px;
    border:1px solid #0000ff;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
}
div.img img {
    display:inline;
    margin:5px; // this will not be of any effect. Margin is ignored for inline elements
    border:1px solid #ffffff;
}
div.img a:hover img {
    border:1px solid #0000ff;
}
div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:5px;
}

更正了CSS：

#content {
    width: 500px; // Or 80%
    height:1000px;
    margin: 0 auto 0 auto;
    background-color:#999;
    overflow:hidden;
}
div.img {
    margin:5px;
    padding: 5px;
    border:1px solid #0000ff;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
}
div.img img {
    display:inline;
    border:1px solid #ffffff;
}
div.img a:hover img {
    border:1px solid #0000ff;
}
div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:5px;
}

Answer 2

好的，好像你在CSS中有一些错误。在第一个CSS代码块（#content {}）中，您是：

在background-color:#999之后缺少分号，这就是它无法正常工作的原因。
使用两个width属性
设置height值而不指定单位（px，％等）。
在不使用背景图像的情况下使用background-size，它将不适用于背景颜色。

另请注意，您可以将margin: 0 auto 0 auto;缩短为margin: 0 auto;

工作JSFiddle example。

id里面的css div class

2 个答案: