仅在一个方向上水平拉伸div

Question

我正在制作响应式布局，该布局基本上是右侧框，因此横幅区域与侧边栏/侧面齐平，适用于桌面和宽视图。

我似乎无法让它在右侧齐平而不会使容器的宽度固定宽度，这意味着即使浏览器宽度的1px差异也会使其悬空或不能跨越足够远。

有什么建议吗？我在这里有一个jsfiddle我的标记：http://jsfiddle.net/MtQ5J/

以下是具体的html标记：

        <div class="hero-container">
         <div class="hero wrapper clearfix">
            <h2>
                We thrive on solving other people’s problems in a collaborative setting.<br />
                This means starting by understanding the client’s needs and goals.<br />
                Listening to and understanding our clients is the key to how we work.  
            </h2>
         </div>
        </div>

首先是H5BP，规范化和移动。

屏幕截图示例：

更新

我在标题周围添加了一个容器，在英雄区域之前关闭它，然后重新打开主要内容。然后我在英雄@ 20％宽度旁边漂浮了一个空div，将英雄设置为80％宽度..这种作品但是我必须将它毁灭才能让它变得完美..还在寻找更多＆＃ 34;流体＆＃34;解决方案，如果可能！

jsfiddle updated

Answer 1

将此规则添加到CSS：

body{
margin:0;
padding:0;
}

JSFiddle Demo

JSFiddle Code

Answer 2

这对你有什么帮助吗？ http://jsfiddle.net/panchroma/5kpkc/

我所做的唯一改变是我添加了

.main.wrapper{
    float:right;
} 

到CSS，以便包装类浮动到右边而不是在页面上居中。

如果您希望在视口缩小时更多地控制旁边的布局，则可能需要使用媒体查询对此进行更多优化

祝你好运！