个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在这个网站上工作:http://www.justaddsolutions.com/SampleSite/
主要区域的宽度为 1024 像素并且始终居中，这已实现。但是，当浏览器窗口宽度超过 1024 像素时，我的客户希望黄色和红色 strip 延伸到浏览器窗口的相关边缘(黄色向左，红色向右)。
我想用基于 CSS 的 Liquid - Fixed - Liquid Layout 来解决它，其中中心部分居中，侧面部分具有相等的液体宽度。但我无法自己弄清楚，也无法在任何地方找到如何去做。
我确实在 mathewjamestaylor 流式布局网站上找到了 Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小到小尺寸时它在 IE8 中中断。
然后我想通过在标题中使用 3 列表来实现这一点，并使用 background-image 和 repeat-x 设置我的 td 元素的样式，但这在 Chrome 和 Safari 中似乎效果不佳。
如果您对此问题有任何帮助，我们将不胜感激。
最佳答案
刚测试过，
http://www.antiyes.com/test/4753259/
看看 html，它现在看起来有点糟糕，因为颜色配置文件和图像的东西，它们必须被更好地切割，但这显示了要做的事情的基础。
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{
width:100%;
height: 145px;
position:relative;
overflow:hidden;
text-align:center;
}
#logo
{
margin:auto;
position:relative;
z-index:5;
width:1024px;
height:99px;
background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}
#red_stripe,#yellow_stripe
{
position:absolute;
left:0px;
right:0px;
z-index:4;
}
#red_stripe
{
left:50%;
height:31px;
top:6px;
background:transparent url(red_strip.png) repeat-x top left;
width:50%;
}
#yellow_stripe
{
height:32px;
top:60px;
width:50%;
background:transparent url(yellow_strip.png) repeat-x top left;
}
</style>
</head>
<body>
<div id="header">
<div id="red_stripe"></div>
<div id="yellow_stripe"></div>
<div id="logo"></div>
</div>
</body>
</html>
关于css - 液体 - 固定 - 液体布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4753259/
25
4
0
所以，我正在使用的这个 Web 应用程序有三个垂直列扩展到整个窗口高度，还有一个页脚 div 扩展到整个宽度。布局如下所示: +|+ --- 其中 + 表示流动列，| 表示固定列，- 表示页脚。 我已
谁能帮我区分{% %}和 {%- -%} .这些语法之间有什么区别。在我的所有用法中，我可以使用任何主题 最佳答案 唯一的区别是一个去掉空白，另一个不去掉。 所以这个{% %}将保留它周围的任何空白。
我正在尝试根据用户查看某个网页的时间启用 div 类，例如:博客、索引或 ../page/webpage 代码是这样的: {% unless template contains "index" and
我是第一次用 Eleventy 建立一个网站，尽管我已经和 Liquid 合作了一段时间，但我还是无法破解这个网站。 我想尽可能地简化架构。这就是为什么我将我的集合分配给变量的原因: {% assig
我想要一组链接 Random Articles Old article 1 Old article 1 Old article 1 但我想从我的帖子中随机
从屏幕截图中，您可以看到当我按下到下一张幻灯片时，箭头不会根据内容高度自动调整。 我希望箭头的动态高度显示在内容的中间。 我引用了Liquid Slider的代码，你可以查看here或在下面查看我的问
好的，我的个人网站有一个基于 CSS liquid div 的布局。地址是 http://danberinger.com/preview.html 问题是我不希望页 footer 分表现得像内联显示一
我正在这个网站上工作:http://www.justaddsolutions.com/SampleSite/ 主要区域的宽度为 1024 像素并且始终居中，这已实现。但是，当浏览器窗口宽度超过 102
我正在使用带有 ajax 的 Liquid Slider，但我遇到了高度问题。 这是我的脚本: var api2 = $.data( $('#slider-7')[0], 'liquidSlider'
我有一个很像 this user 的问题，但我想更进一步，使我的图像具有能够流畅响应其容器的高度。 我做了一个东西来演示here . 我想要做的是给容器 div 类“navcont”(灰色区域)一个流
我想要一个 [Fixed][Liquid][Fixed] 跨浏览器兼容的布局。 HTML: body div#col-1 div#col-2 div#col-3 CSS: #col
如何在我的 spriteKit 应用程序中获取少量液体？ 我想要那种液体放在一个容器里，它会被密封在里面，但我希望它能够四处移动。 有没有更好的方法来实现这个？也许没有 SpriteKit 的选项？
假设我有一堆 _data 文件，用于为特定页面创建列表。所有具有这些列表的页面都有一个自定义的前端变量 pageName。 pageName 的值恰好将 _data 文件与列表匹配。 我不想将 htm
我是 Shopify 新手，我正在尝试了解以下内容。我知道 Liquid 模板引擎会解析 Shopify 服务器上的 JavaScript。 有办法防止这种情况发生吗？例如，我有一个变量来配置我的插值
我被困在我正在处理的网站的 css 布局上。它是一个报告工具，将在宽屏显示器和上网本上使用。该站点已完成，除了可以从(非常)宽屏格式很好地降级为窄(上网本)格式的样式表。 这是它在宽屏上的显示方式:
我正在尝试部署我的 RoR 应用程序。当 RAILS_ENV 设置为开发时，它似乎在我的开发机器上运行良好。但是，当我将它放在生产服务器上并将其设置为生产模式时，导航到起始页后出现以下错误: => B
我正在读这个page并遇到了这段代码: {% if form.posted_successfully? %} {{ 'contact.form.post_success' | t
我正在开发 google chrome 扩展程序。我使用 Liquid slider 来帮助我处理弹出窗口，当我在括号中并进行实时预览时，我得到了我想要的结果。 https://gyazo.com/d
我在 jekyll 中学习 liquid，但我很难按月获取帖子数量。计算每个标签或类别的帖子数量似乎很容易(因为有变量 site.tags 和 site.categories)，我没有问题。这是 my
我很难将外部 jQuery 库集成到我自己的 liquid 页面中。我想用 CDN 加载它。 在 theme.liquid 页面上，我以这种方式加载 Javascript: {{ 'spot-the
我是一名优秀的程序员,十分优秀！