html – Tricky CSS布局_html-js-css

概述所以我正在制作一个布局相当有问题的网站。有黑色块表示的四个角图像TL，TR，BL和BR。深橙色区域是主要内容(宽度为960像素)，外部区域由绿色箭头表示为浏览器窗口。见图： Diagram http://dotcafedesigns.com/stackoverflow/problem.gif 顶部的图像代表站点尽可能狭窄 – 如果它比定义的区域大，应该不应该没有滚动条，它不应该被允许比这窄(960 所以我正在制作一个布局相当有问题的网站。有黑色块表示的四个角图像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 >left image</div>    <div >right image</div>      </div>  <div ID="content">    content  </div>  <div ID="bottom">    <div ID="container">      <div >left image</div>      <div >right image</div>    </div>  </div></body>

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

总结

以上是内存溢出为你收集整理的html – Tricky CSS布局全部内容，希望文章能够帮你解决html – Tricky CSS布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1112177.html