居中的div和容器左侧的填充液 [英] Centered div and fluid left padding over the container

问题描述

我的布局中有一个居中的红色div(蓝色)，最大宽度(1240px)，我正在CSS中进行搜索.居中区域(蓝色)左侧的徽标区域(紫色)为300px.在此点的左侧，以红色显示(无论您使用的屏幕分辨率是什么)，它都是流畅的.

I have a centered red div (blue) with a max width (1240px) in my layout and I search to make this in CSS. The logo area (purple) from the left of the centering area (blue) is 300px. At the left of this point, in red, it will be fluid (whatever the screen resolution you have).

(顺便说一句，这与下面的浅灰色div相同)

(btw, that's the same thing for the lightgray div just below)

您有这样做的主意吗?

<header>
   <div id="logo">
      <div class="w">
         <a href="#">Website name</a>
      </div>
   </div>

   <div class="wrap">
      <div class="r">
         <nav id="menu">
            <ul>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
            </ul>
         </nav>
         <nav id="social">
            <ul>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
            </ul>
         </nav>
      </div>
   </div>
</header>

推荐答案

在 #logo 元素上使用:before 伪类解决.

Solved with a :before pseudo-class on the #logo element.

#logo:before{content:""; position:absolute; top:0; right:100%; width:1000%; height:100%; background:red;}

http://jsfiddle.net/Flayks/fUf2z/

这篇关于居中的div和容器左侧的填充液的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！