css - 正文中未显示内容背景图片

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 区域。

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

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