html - 如何制作右列在容器外部的两列布局?

标签 html css

我想做一个简单的两列布局,其中右列在容器之外,但仍然使容器高度扩展。通过使用 position:absolute 它应该是应该的,但没有扩展。

这是html代码

//注意:我没有在此处添加 head 标签以节省空间 :)

<html>
<body>

<div id="container">

            <div id="left">


            </div>
                            <div id="right">


                            </div>

</div>

</body>
</html>

还有CSS代码

#container {
            width:900px;
            margin:0 auto;
}

#left {
        width:700px;
        float:left;}

#right{
        width:230px;
        margin-left:760px;
        position:absolute;
}

我不能使用 float:right,因为它会 float 到容器的右侧。也许结构必须有所不同我不知道。

最佳答案

尝试在#right上设置一个position: relative,并给它一个大于容器宽度的margin-left:http://jsfiddle.net/8MEqL/

关于html - 如何制作右列在容器外部的两列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9730426/

相关文章:

javascript - 如何使用 keydown 事件移动列表项

jquery - chrome 移动浏览器中的水平页面滚动

javascript - Swiper slider - 为不同尺寸的屏幕设置响应图像

html - 如何让表单变得响应式?

javascript - Bootstrap Collapsed div 初始显示属性为空

javascript - textarea.val() 设置和获取

html - 仅使用 CSS 在子菜单中选择子项时突出显示父项?

javascript - HTML5shim : how do <video> and <audio> render in legacy browsers?

html - 是否可以在 CSS 中定义变量?

php - 如何将 CSS 类添加到 PHP 行?