html – Tricky CSS布局

发布时间：2020-12-14 21:33:48 所属栏目：资源来源：网络整理

导读：所以我正在制作一个布局相当有问题的网站。有黑色块表示的四个角图像TL，TR，BL和BR。深橙色区域是主要内容(宽度为960像素)，外部区域由绿色箭头表示为浏览器窗口。见图： Diagram http://dotcafedesigns.com/stackoverflow/problem.gif 顶部的图像代表站点

所以我正在制作一个布局相当有问题的网站。有黑色块表示的四个角图像TL，TR，BL和BR。深橙色区域是主要内容(宽度为960像素)，外部区域由绿色箭头表示为浏览器窗口。见图：

Diagram http://dotcafedesigns.com/stackoverflow/problem.gif

顶部的图像代表站点尽可能狭窄 – 如果它比定义的区域大，应该不应该没有滚动条，它不应该被允许比这窄(960px)窄。底部的两个图像代表浏览器的不同宽度。

底部左右黑色块(图像)应始终位于屏幕的左下角，除非宽度降至960像素，否则BL和BR图像应略微进入主区域。如果网站缩小到200像素，则BR图片不应该仍然在右边。

在这一点上，我并不关心它在IE6中正常工作(我可以大致工作)，但是我甚至无法弄清楚如何完全没有Javascript或非常实验的CSS。目前我正在使用绝对定位的div的工作，但不正确。

我想我会愿意接受一些JS，如果没有其他方式，但我宁愿不。

回答非常感谢！

解决方法

不需要Javascript。至少在大多数现代浏览器中。使用简单的定位和一个@media查询我把它关掉了：

<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: orange;
      text-align: center;
      color: black;
      overflow-x: hidden;
    }
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 20px 0;
      min-height: 800px;
      background: #cc6600;
      z-index: 0;
    }
    .image {
      background: black;
      color: white;
      height: 60px;
      width: 100px;
      padding: 20px 0;
      z-index: 1;
      opacity: .95;
    }
    #top {
      width: 960px;
      margin: 0 auto;
      position: relative;
      overflow: visible;
    }
    #top .image {
      position: absolute;
    }
    #top .left {
      left: -80px;
    }
    #top .right {
      right: -80px;
    }
    #bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    #bottom .image {
      position: absolute;
    }
    #bottom .left {
      left: 0;
    }
    #bottom .right {
      right: 0;
    }

    @media all and (max-width:1120px) {

      #container {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: visible;
      }
      #bottom .left {
        left: -80px;
      }
      #bottom .right {
        right: -80px;
      }    

    }
  </style>
</head>
<body>
  <div id="top">
    <div class="left image">left image</div>
    <div class="right image">right image</div>    
  </div>
  <div id="content">
    content
  </div>
  <div id="bottom">
    <div id="container">
      <div class="left image">left image</div>
      <div class="right image">right image</div>
    </div>
  </div>
</body>

这可能属于您对“极度实验性CSS”的描述，但我认为您会感到惊讶，它有多少支持，以及使用JS轻松引导的简单方法 – 只需检查浏览器宽度即可-size并添加额外的CSS，当宽度在1120px以下。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!