简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 网页如何实现这种布局？
怪我咯
怪我咯 2017-04-11 11:00:55
0
4
277

我想达到下面所述的效果

  • 页面分两大块儿，①所指的p宽度固定，高度不固定，居中

  • ②所指的p要紧贴着①；并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】；

我所不能解决的问题

  • 如果对②使用position：fixed，那么当浏览器窗口不固定的时候，如何才能让它紧贴着①；
    或者说②的left或right属性怎么取值？

  • 有想过浏览器窗口宽度发生变化时，用js去调整②的left或right取值。。。

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

怪我咯
怪我咯

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

reply all(4)
黄舟
黄舟2017-04-11 11:02:55 4 floor 
<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编辑右边的板块在保持在在右边了）

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 11:02:55 3 floor

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

Like +0
Add Reply
阿神
阿神2017-04-11 11:02:55 2 floor

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


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

(楼上正解)如果不考虑兼容性，还可以这样：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <p class="main"></p>
  <p class="aside"></p>
</body>
</html>

SCSS

$mainWidth: 240px;
$asideWidth: 100px;

html,body {
  margin: 0;
  box-sizing: border-box;
}

.main {
  margin: 20px auto;
  width: $mainWidth;
  height: 4000px;
  border: 1px solid #333;
}

.aside {
  position: fixed;
  top: 200px;
  right: 0;
  left: 0;
  margin: auto;
  width: $asideWidth;
  height: 100px;
  border: 1px solid #333;
  transform: translateX(($mainWidth+$asideWidth)*.5+10px);
}

结果展示：
http://codepen.io/huangxutao/pen/VjawEO/

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！