2

我无法生成 HTML/CSS 布局。考虑它的最佳方法是采用正常的水平居中页面布局。只有我想要一个 div 超出居中布局到浏览器窗口的右边缘。

这应该与浏览器窗口大小调整一起流畅地工作。 这张图片中的红色平面解释了我的意思

4

3 回答 3

4

这里有两种纯 CSS 方法来实现这样的布局。两者都在 IE 7/8/9 和 Chrome 中进行了简要测试。

示例 1

这是一个您知道所有元素高度的示例。

演示：http: //jsfiddle.net/3RDuy/2/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }​

示例 2

这是一个示例，您只知道顶部和底部的高度。

演示：http: //jsfiddle.net/3RDuy/3/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa;  height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }​

如果您希望所有内容都具有可变高度（包括高度大于 100% 的能力），您可能需要使用 JavaScript。

于 2012-10-28T11:49:22.577 回答
4

这是一个非常有趣的挑战。

几个月前我需要一个类似的效果，一个元素从容器延伸到窗口的边缘，但不需要用于内容的空间——它只是一种设计效果。

蒂姆的回答是可靠的，但需要知道元素的高度是不切实际的。我的解决方案消除了这个要求。

利用包装器、一些填充和负边距，我们可以操纵我们的布局来复制所需的功能。

标记：

<div class="header">
    <h1>Hello World!</h1>
</div>

<div class="content">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

<div class="footer">
    <p>Lorem ipsum dolor sit amet.</p>
</div>​

CSS：

.header,
.footer {
    clear: both;
    margin: auto;
    width: 600px; /* Your container width */
    background: grey;
    }

.content {
    float: right;
    width: 50%;
    padding-left: 300px; /* Half of your container width */
    }

.a {
    float: left;
    margin-left: -300px; /* Half of your container width */
    width: 200px;
    height: 10em;  /* Not required, set for visual */
    background: red;
    }

.b {
    margin-left: -100px; /* The difference between half your container width and element A */
    height: 10em; /* Not required, set for visual */
    background: yellow;
    }

演示：http: //jsfiddle.net/rkW9J/

应该注意的是，这还没有经过广泛的跨浏览器测试，但没有实现任何明显的布局怪癖，所以我们应该很好。

于 2012-10-28T14:12:13.407 回答
3

找不到解决方案宽度纯 CSS，但这里是如何使用 javascript / jquery 来做到这一点。

演示

HTML：

<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>​

CSS：

#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }

jQuery：

var right = $('#right'),
    left = $('#left');

$(window).on('resize',positionRightDiv);

function positionRightDiv(){
    var posLeft = left.offset().left + left.outerWidth(true),
        posTop = left.offset().top;
    right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();

注意：要使此方法起作用，#wrapper必须没有也position:relative;没有overlow:hidden; ​</p>

PS漂亮的原子心母亲简介图片;-)

于 2012-10-28T11:19:14.883 回答