logo标签列表

全宽度带背景色的div

cssbackground
6
在这个页面上：http://www.tff-bvba.be，我需要图片背后的灰色背景在所有分辨率下都是全宽度，并且文本和图片居中于屏幕。一切工作正常，除了背景继续向右延伸，超出屏幕（向右滚动，您会看到）。我花了2个小时寻找解决方案，但没有找到适合我的解决方案... 这是我的代码：
HTML:
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-  home.png" alt="hugo-home" class="alignright size-full wp-image-1283" /></div>
<div class="hometext"><h1>Slaag in je materiaalinnovatie</h1>
Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?<br /><br />TFF maximaliseert de slaagkans van je project door:
<ul>
    <li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
    <li>maximaal <b>draagvlak </b>bij je medewerkers</li>
    <li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</div>
</div>
</div>

CSS：

.wide { 
    text-align:left;
    font-weight:bold;
    background:#ebebeb;
    margin-left:-100%;
    margin-right:-100%;
    margin-bottom: 60px;
    height: 465px;
    }

.odd {
    background-color:#ebebeb;
    clear:both;
    width:900px;
    padding:40px 0 27px 0;
    margin: 0 auto;
    }

.hometext {
    float: left;
    width: 500px;
}

.homeimage {
        margin-top: 0px;
    float: right;
}

感谢您的帮助，非常感激！Stefaan

2
一个快速的解决方法是在#bdywrapper2上添加overflow:hidden。这不是最好的解决方案，但它可以工作。 - Nick R
溢出问题在我看来只是掩盖了问题。请看我的回答，它是一个很好的解决方案，并且你可以在图片中看到它的实例工作 :) - Paulo Roberto Rosa
感谢大家的帮助！！ - Stefaan
3个回答
5

我使用Firebug实时更改了您的HTML和CSS，现在它可以运行，看：

working solution

您的问题出在HTML上，您的

放置位置不正确，我已经将其放置正确，并稍微更改了CSS，使用以下HTML和CSS：

HTML：

<div id="bdywrapper2">
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-home.png" alt="hugo-home" class="alignright size-full wp-image-1283"></div>
<div class="hometext">
<h1>Slaag in je materiaalinnovatie</h1>
<p>Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?</p>
<p>TFF maximaliseert de slaagkans van je project door:</p>
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<p><a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</p></div>
</div>
</div>

<!-- Start of main -->
<div class="main">









<div class="clear"></div>

<!-- Start of dynamic loop -->
<div class="dynoloop">

<!-- ******************************************************************** This is the start of blog loop ********************************************************************-->





<!-- Start of one half first -->
<div class="blog_one_half_first">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section style="overflow: hidden;" class="slider">

<ul style="width: 800%; margin-left: -412px;" class="slides"><li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>


            <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li>

                <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>


    <li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li></ul>


<ol class="flex-control-nav"><li><a class="active">1</a></li><li><a>2</a></li></ol><ul class="flex-direction-nav"><li><a class="prev" href="#">Prev</a></li><li><a class="next" href="#">Next</a></li></ul></section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half first -->

<!-- Start of one half -->
<div class="blog_one_half">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section class="slider">

<ul class="slides">


            <li style="display: list-item;">
        <h3><a href="http://www.tff-bvba.be/testartikel-3/">Een tevreden klant vertelt…</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/onze-referenties/">Een tevreden klant vertelt…</a></h2>
<p>
“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore<br>
<a href="http://www.tff-bvba.be/onze-referenties/" title="Onze referenties" class="bttn-right">Meer klanten</a></p>
        </li>


    </ul>


</section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half -->

<!-- ******************************************************************** This is the emd of blog loop ********************************************************************-->

<div class="clear"></div>

</div><!-- End of dynamic loop -->

</div><!-- End of main -->

<!-- Start of accent bottom -->
<div class="accentbottom">

<!-- Start of accent top -->
<div class="accenttop">

</div><!-- End of accent top -->

</div><!-- End of accent bottom -->

</div>

CSS:

.wide { 
    text-align:left;
    font-weight:bold;
    background:#ebebeb;
    margin-bottom: 60px;
    width: 100%;
    height: 465px;
}
它没有问题，我已经实时更改了页面，并且在我所做的更改中完美地运行。请查看编辑。 - Paulo Roberto Rosa
1
你是对的，我没有看到.wide下面的.odd div。 - web-tiki
3
尝试以下 CSS：
.main {
    margin: 0 auto;
    padding-bottom: 60px;
    width: 100%;
}
.wide {
    background-color: #EBEBEB;
    font-weight: bold;
    height: 465px;
    text-align: left;
}
这确实不起作用，因为.wide的div永远不会适合整个屏幕，因为它被另一个不是100%的div包裹着。 - Paulo Roberto Rosa
但是，.main位于div.bdywrapper2下，后者具有100％的宽度。这就是为什么我将.main的宽度从980px更改为inherit（我们也可以使用100％）。设置.wide的宽度：100％将完全适合窗口。 - Kishori
啊，你继承了 100% 的宽度。最好也使用 100%，更易理解。 - Paulo Roberto Rosa
1
简单的更改就可以解决问题
从类.wide中删除margin-left:-100%; margin-right:-100%;，并将odd类的宽度更改为100%而不是900px

您当前的CSS正在拉伸背景....!!
编辑：
在评论后进行编辑：使用wrapper类来包装您的所有文本和图像，将odd放到width:100%中，这将确保更好的兼容性和CSS流动性
HTML
<div class="odd">
 <div class="wrapper">
   <div class="homeimage">
      <img src="" class="alignright size-full wp-image-1283" />
  </div>
  <div class="hometext">
  </div>
 </div> <!-- //wrapper -->
</div><!-- //odd-->

CSS
.wrapper{width:90%;margin:0 auto} // this will center the div and not take whole width at the same time
问题在于.odd内容将使用所有的宽度，例如：人物图像将粘贴在屏幕右侧。 - web-tiki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接