javascript - 网页如何实现这种布局？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 网页如何实现这种布局？

怪我咯 2017-04-11 11:00:55

[JavaScript讨论组]

575

我想达到下面所述的效果

页面分两大块儿，①所指的p宽度固定，高度不固定，居中
②所指的p要紧贴着①；并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】；

我所不能解决的问题

如果对②使用position：fixed，那么当浏览器窗口不固定的时候，如何才能让它紧贴着①；
或者说②的left或right属性怎么取值？
有想过浏览器窗口宽度发生变化时，用js去调整②的left或right取值。。。

大家有什么技巧来实现这种效果吗

怪我咯

走同样的路，发现不同的人生

全部回复(3)

黄舟2017-04-11 11:02:55 3楼

<style type="text/css">
    *{ margin:0; padding:0; }
    p{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; }
    h1{ width:100%; height:200px; }
    p{ width:200px; height:200px; background:red;  position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; }
</style>
</head>

<body>
<p>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
</p>
<p></p>

不知道你要是不是这样，如果你的整体宽度大于1366的话，可能你就要缩小中心的那个板块宽度，那么久需要用一点JS （还有就是fixed 兼容到IE7，如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了）

赞 +0

添加回复

大家讲道理2017-04-11 11:02:55 2楼

把 2 放到 1 中，用定位使其位置溢出到 1 右边。

赞 +0

添加回复

阿神2017-04-11 11:02:55 1楼

我觉得应该只能用js去解决了
jquery的代码如下


//监视窗口大小变动事件
$(window).resize(function (){
    var ①=$("①")
    var ①offset=①.offset();
    //用元素距离左面的像素+元素本身的宽度
    var ②left=①offset.left+①.outerWidth()
    $("②").css('left',②left)
})
//在页面加载完毕之后手动执行一下reszie事件
$(window).trigger('resize')

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>