css - 居中的 div 和流体在容器上的左填充

Question

我的布局中有一个最大宽度（1240 像素）的居中红色 div（蓝色），我搜索以在 CSS 中创建它。居中区域（蓝色）左侧的徽标区域（紫色）为 300 像素。在这一点的左边，红色，它将是流动的（无论你有什么屏幕分辨率）。

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

你有这样做的想法吗？

<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>

Answer 1

除了取决于窗口大小或分辨率的东西之外，不完全确定你在追求什么，那么，在这里使用百分比有帮助吗？您可能知道这一点，但您可以在 css、边距、填充和宽度等中使用百分比。这直接取决于窗口大小或分辨率和比例？

http://mattsnider.com/css-using-percent-for-margin-and-padding/

Answer 2

用元素:before上的伪类解决。#logo

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

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