Question

我在主div（.cont）中有一个背景图像，它没有以全宽显示，也无法弄清楚如何在第二行div（.mainl和.mainr）中显示它。该页面位于http://sallymilo.com/0test/

请告诉我有关修复的事项：

CSS：

.cont { width:100%; max-width:1000px; margin:auto; background-image:url('https://myimagefiles.com/datasales/bg.png'); }
.hdrl { width:33%; height:131px; float:left; position:relative; background-image:url('https://myimagefiles.com/datasales/hdrl.png'); background-position: center center; background-repeat: no-repeat; }
.hdrr { width:67%; height:131px; float:left; position:relative; background-image:url('https://myimagefiles.com/datasales/hdrr.png'); background-repeat: no-repeat; }
.ttl { position:relative; float:left; z-index:10; margin:2em 1em 0 1em; color:#fff; font-family:Arial, Helvetica, san-serif; font-size:24px; font-weight:bold; text-align:center; }
.mainl { width:65%; float:left; position:relative; }
.mainr { width:35%; float:left; position:relative; }
.desc { color:#00356f; font-family:Arial, Helvetica, san-serif; font-size:14px; font-weight:bold; text-align:left; margin:0 2em 0 2em; }

HTML：

<div class="cont">
  <div class="hdrl"></div>
  <div class="hdrr"> 
<div class="ttl">[[Title]] of up to 80 characters will go into this area - right in this space!!!</div>
 </div>
<div style="clear: both"></div>
  <div class="mainl"> 
    <p class="desc"><br>
      [[Description]]</p>
  <p>tabs</p>
    <p align="center"><img src="thanks.png"  style="max-width:209px;"></p>
</div>
  <div class="mainr"> 
    <p align="center">[[Picture1]]</p>
    <p align="center">[[Picture2]]</p>
  </div>
</div>

Answer 1

您的clear:both导致您在图片背景中断。

将clear添加到您的mainr div之后的底部。然后，背景将延伸到mainl和mainr区域。

标头不是全宽的原因是因为您要应用max-width属性，该属性只允许最大宽度。在你的情况下1000px。

看看：https://jsfiddle.net/bqboyLmb/

内容背景图像没有显示在身体中

1 个答案: