个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想开发 4 列布局(除了占据页面全部可用宽度的 mastead 和页脚之外)，这样最右边的列固定在 200px，其他列是可变的，受 min-width = 960px 和 max -宽度= 1216 像素。
所以这意味着只要浏览器窗口大于 960 像素且小于 1216 像素宽，布局就像流动布局一样。一旦浏览器窗口大于 1216，它就作为固定布局，宽度 = 1216px，页面在浏览器视口(viewport)中居中。如果浏览器窗口缩小到小于 960px，底部会出现水平滚动条，因为 min-width 是 960px。
我喜欢开发网站布局的网格系统(示例 http://960.gs/)。
我网页上的文档类型是 <!DOCTYPE html> (又名 html5 文档类型)
该解决方案应适用于 IE 6 7 8 9 和 FF、Safari、Chrome、Opera。
希望这能让我清楚地知道我在寻找什么。
根据上面给出的条件，这个问题的解决方案是什么？
我搜索了谷歌但找不到任何解决方案。我遇到过类似 3 列最大宽度但没有网格系统的解决方案，看起来太笨拙了。
稍后我必须添加对小屏幕(移动设备)的支持，这需要将一些列设置为 display:none 并使用媒体查询将其他列堆叠在一起，但首先我需要解决上述问题。
最佳答案
我在 IE7/8 和最新版本的 Chrome、Firefox、Opera、Safari 中对此进行了测试。
由于 min-width 和 max-width 这在 IE6 中不起作用(如@meagar 所说) - 有大量在线资源详细介绍了如何绕过这。除非我的其余代码对您来说是正确的，否则我不会自己花力气去做这件事。另外，我对使用 CSS 网格系统没有兴趣。
Live Demo (右列更高)
Live Demo (具有更高的流体柱)
HTML:
<div id="container">
<div id="header">header</div>
<div id="fluidColumnContainer">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
<div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0
}
#container {
margin: 0 auto;
min-width: 960px;
max-width: 1216px;
overflow: auto
}
#fluidColumnContainer {
padding: 0 200px 0 0
}
#fixedColumn {
width: 200px;
float: right
}
.column {
float: left;
width: 33%
}
#header {
height: 90px
}
#footer {
height: 90px;
clear: both
}
关于html - 使用基于网格的设计，具有最大宽度和最小宽度的 flex 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4713181/
26
4
0
“用 Haskell 进行函数式思考”中的练习之一是使用融合定律使程序更加高效。我在尝试复制答案时遇到了一些麻烦。 部分计算要求您将 maximum (xs++ map (x+) xs) 转换为 ma
我正在尝试获得 R 中最大/最小的可表示数字。 输入“.Machine”后 我有: $double.xmin [1] 2.225074e-308 $double.xmax [1] 1.797693e+
有没有办法更改浏览器验证消息 请检查所附图片。 我目前正在使用 wooCommerce 目前它显示小于或等于 X 个数字，我想更改为请求超过 X 个项目的报价。 请多多指教 最佳答案 您需要使用oni
我正在尝试将解决方案从 Excel 求解器复制到 R 中，但不知道从哪里开始。 问题: 每小时选择 5 个选项(5 行)，以最大化“分数”的总和，而无需在多个小时内选择同一组 2 次。 换句话说: 最
Haskell 中是否有这样的功能: max_of_type :: (Num a) => a 所以: max_of_type :: Int == 2 ^ 31 - 1 // for example,
我有这两个表示时间范围(秒)的输入字段，我需要这样设置，以便“from/min”字段不能高于“to/max”，反之亦然。 到目前为止我得到了这个: jQuery(document).ready(fun
我有一个看起来像这样的表: http://sqlfiddle.com/#!9/152d2/1/0 CREATE TABLE Table1 ( id int, value decimal(10,
我会尝试尽可能简单地解释它: 首先是一些带有虚拟数据的数据库结构。 结构 tb_spec_fk feature value ----------------- 1 1 1
我有两个表。 表 1: +---------+---------+ | Lead_ID | Deal_ID | +---------+---------+ | 2323 | null |
我的数据库中有一个字段可以包含数字，例如8.00 或范围编号，例如8.00 - 10.00。 如果您将每个数字作为单独的数字，我需要从表中获取 MIN() 和 MAX()。例如当范围为 8.00 -
max(float('nan'), 1) 计算结果为 nan max(1, float('nan')) 计算结果为 1 这是预期的行为吗？ 感谢您的回答。 max 在 iterable 为空时引发异常
我想问一下如何在 CSS 中创建一个页脚栏，它具有最小宽度(比如 650 像素)，并且会根据窗口大小进行拉伸(stretch)，但仅限于某个点(比如 1024 像素)。 我的意思是当窗口大小为例如 1
我尝试调整表格列宽(下一个链接上的“作者”列 http://deploy.jtalks.org/jcommune/branches/1?lang=en)。我已将最小/最大属性添加到 .author-c
在 C# 中，是否有用于将最小值和最大值存储为 double 值的内置类？ 此处列出的要点 http://msdn.microsoft.com/en-us/library/system.windows
问题: 每个任务队列是否可以每秒处理超过 500 个任务？ 每个 GAE 应用是否可以每秒处理超过 50,000 个任务？ 详细信息: Task queue quota文档说: Push Queue
我想知道是否允许最大或最小堆树具有重复值？我试图仅通过在线资源查找与此相关的信息，但一直没有成功。 最佳答案 是的，他们可以。您可以在“算法简介”(Charles E. Leiserson、Cliff
首先，我是 .NET 开发人员，喜欢 C# 中的 LINQ 和扩展方法。 但是当我编写脚本时，我需要相当于 Enumerable extension methods 的东西 任何人都可以给我任何建议/
这是一个检查最大 malloc 大小的简单程序: #include std::size_t maxDataSize = 2097152000; //2000mb void MallocTest(vo
我想找到我的数据的最小值和最大值。 我的数据文件: 1 2 4 5 -3 -13 112 -3 55 42 42 而我的脚本: {min=max=$1} {if ($1max) {max=$1}
我想查询我的Elastic-Search以获取仅具有正值的最低价格价格。我的价格也可以为零和-1；所以我不希望我的最小聚合返回0或-1。我知道我应该向查询(或过滤器)添加脚本，但是我不知道如何。我当前
我是一名优秀的程序员,十分优秀！