Question

我有2个div元素。一个名为“profilen”，我想要一个背景，并且与其他div具有相同的大小，并将背景保留在另一个名为“profilbg”的div元素中，该元素放在div中，但背景图像超出了div。

这是我试过的代码

<style>
.profavataren {
    float:left;
    width:250px;
    height: 250px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.profuin {
    float: right;
    width: 350px;
    height: 175px;
    padding-top: 75px;
}
.leftcolum {
    border-style: none none solid none;
    padding: 0px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.centercolum {
    border-style: none solid solid none;
    padding: 0px;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
}
.rightcolum {
    border-style: none none solid none;
    padding: 0px;
    border-color: #000000;
    padding-left: 3px;
    border-width: 1px 1px 1px 1px;
}
.centerTable { margin: 0px auto; }
.profilen {
width: 100%;
text-align: left;
}
.profilbg {
background: url(<?php echo $uin->backgroundimg; ?>);
background-repeat: no-repeat;
background-size:cover;
}
.profilsize {
    width: 600px;
    margin: auto;
}
</style>
<div class="profilsize" align="center">
  <table width=100% cellspacing=0>
    <tr><td class="subTitle" ID="title" colspan="2"><b><font face="monbaiti" size="3" color="a1a1a1"><?php echo $uin->login; ?></font><?php echo $ledelsen; ?></b></td></tr>
  </table>

  <div class="profavataren">
    <img src="<?php echo $uin->avatar; ?>" height="250" width="250">
  </div>
  <div class="profuin">
    <div align="center" style="padding-left: 35px; padding-right: 35px;"> 
      <table align="center" class="centerTable">
        <tbody>
          <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr>
          <tr><td class="leftcolum">Status:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $status; echo "($online)"; ?></td></tr>
          <tr><td class="leftcolum">Penger:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $penger; ?></td></tr>
          <tr><td class="leftcolum">Brukernavn:</td><td class="centercolum">&nbsp;</td><td class="rightcolum"><?php echo $uin->login; ?></td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="profilen">
    <div class="profilbg">
      <?php echo nl2br($uin->profilen); ?>
    </div>
  </div>
</div>

这里是我想要的div

<div class="profilen">
  <div class="profilbg">
    <?php echo nl2br($uin->profilen); ?>
  </div>
</div>

但背景总是突出那些div元素。如果您查看此屏幕截图，您会看到背景图像不应位于红线上方，因为div应低于该值。 http://prntscr.com/ahslxw

Answer 1

使用clear：两个；

那应该可以解决您的问题

Answer 2

尝试清除profilbg css中的浮动

像这样

.profilbg {
    background: url(<?php echo $uin->backgroundimg; ?>);
    background-repeat: no-repeat;
    background-size:cover;
    clear:both;
}

Answer 3

因为页面上的其他元素都是浮动的，所以背景图像也会在它们后面。要解决此问题，请确保“profilen”div 清除上方的左右浮动元素，以便在添加背景图像时，它将位于浮动元素下方。因此，将“profilen”的CSS更改为：

.profilen {
    width: 100%;
    text-align: left;
    clear: both;
}

Answer 4

.profilen {
    background: url(<?php echo $uin->backgroundimg; ?>);
    background-repeat: no-repeat;
    background-size:cover;
    height="250"
}

DIV背景图像不会留在div内

4 个答案: