个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我正在尝试使用 this用两个 50% 列宽的布局代替。但似乎当右列达到其“最小宽度”时，它会进入左列下方。有什么方法可以使用“垫片”技术为包装器设置最小宽度，以便两列都停止调整大小。因此，消除了右栏在左栏下找到自己的问题。
我的页面如下。
<style type="text/css">
#left {
float: left;
width: 50%;
}
.minwidth {
width: 500px;
height: 0;
line-height: 0;
}
</style>
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
<div class="minwidth"> </div>
</div>
问题是左列将停止调整大小，但右列将低于左列并继续调整大小。基本上，我想要的效果是一旦包装宽度低于波纹管，左列和右列也将停止调整大小。将垫片放在左右两列中也不起作用。
是否有另一种方法可以获取两个 50% 宽度的列并使用垫片正确设置最小宽度？
谢谢。
编辑:minwidth 类中的空格实际上是 ，但它被转换了。 ;)
最佳答案
基于 CSS Play 的 Stu Nicholls 的技术，我能够想出一个“不需要 HTML 表格”的解决方案，我个人很喜欢它，因为它不仅适用于 IE6+ 和 FF2+，它也是有效的 CSS这不需要任何黑客攻击。关于为什么基于 CSS 的布局优于 HTML 表格的论点，请参见下文。
首先，我建议在使用 CSS 设计新页面时使用符合标准 的浏览器模式。有关 quirksmode 和标准兼容模式的解释，请查看 this article来 self 最喜欢的 CSS 资源网站之一。您所要做的就是在页面顶部添加一个特定的 DOCTYPE 元素。然后 CSS 将被迫以符合标准的模式呈现，从而减少错误和浏览器特性。如果您无法切换到符合标准的模式，则可以使用 CSS Play 中的 quirksmode 浏览器的最小宽度解决方案。
其次，您必须在现有标记周围添加一个额外的包装器。这个包装器用于为理解最小宽度的浏览器(不是 IE)设置最小宽度。然后，您可以使用 * html 技巧专门针对 IE 6，并将 Stu Nicholl 的技术应用于内部包装器。此处详细介绍了该技术，使用的具体示例是“#2 For standards compliant mode IE”:
http://www.cssplay.co.uk/boxes/minwidth.html
最终结果相当简单。它使用 2-column ALA style 创建 2 个 50% 的列原始问题中提到的技术，具有整体最小宽度(在此示例中为 500px)，其中列停止调整大小并且右列不低于左列。希望对您有所帮助!
编辑:同样的技术可用于将跨浏览器兼容的最小宽度应用到任何东西。例如，不需要每个列都是 50%，可以使用任意数量的列。 http://www.glish.com/css/是基于 CSS 的页面布局的重要资源，当结合这种最小宽度技术时，可以使用最少的有效 CSS 创建许多漂亮的布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/* For browsers that understand min-width */
.width {
width: 100%;
min-width: 500px;
}
/* IE6 Only */
* html .minwidth {
border-left: 500px solid white;
position: relative;
float: left;
}
/* IE6 Only */
* html .wrapper {
margin-left: -500px;
position: relative;
float: left;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
}
</style>
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
</div>
</body>
</html>
现在，我建立 Stack Overflow 帐户的动机是能够响应下面的建议“如果您想要两列，请使用表格，而不是试图强制 Div 的行为像表格”。由于我太新了，无法发表评论或投反对票，因此我正在扩充此讨论。
真的吗？
有人问了一个关于基于 CSS 的布局的问题，您的回答是告诉他们使用 HTML 表格？
首先让我说，我不认为 HTML 表格是完全没有必要的。事实上，任何时候我都需要显示表格数据，即关系数据，我使用 HTML 表格。 CSS 表格显示属性尚未得到完全支持(即将在 IE8 中支持!)，使用单级 HTML 表格是一种有效的解决方案。查看任何 Google 网页的标记，您会发现他们会同意。
作为一个花费大量时间编写跨浏览器兼容的基于 CSS 的布局的人，他们可以使用表格在 10 分钟内完成，我同意有一个更简单的解决方案来解决这个问题。然而，仅仅因为您可以使用炸药来翻新您的厨房，并不意味着您应该这样做。以下文章详细解释了为什么基于 CSS 的布局更受欢迎。
关于internet-explorer - CSS:两个 50% 的流体列不符合最小宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/191429/
25
4
0
.mid{ margin:0 auto; max-width:10em; min-width:5em; border:1px solid red; } ... 此代码创
我想用 制作 4 列元素: 第1列的宽度需要固定为200px。 其他 3 列需要动态划分它们之间的剩余宽度。 Column 1 Fixed 200px Column 2 Fluid Column 3
好的，我看到了 static , fluid , static 布局，但现在我的设计需要fluid, static, fluid 布局。 如: +---------------------------
我有以下 2 列 div 布局。左列需要有 75px 的宽度以容纳图像，但右列需要流入其所有父容器。 这个网格位于一个用户控件中，该控件被添加到多个站点/页面，每个站点/页面都有不同的布局，因此父容器
在此fiddle ，我在 dark-blue 的包装器中有一个图像，我希望它相对于它的包装器水平和垂直对齐 70%。 我尝试使用 table-cell，但它似乎不起作用。 HTML:
在 CSS 中获得此布局的最佳方法是什么？想象一下，我有三个 div，两个 div 在另一个里面。在两个内部 div 中，第一个具有特定的宽度集，第二个 div 预计会占用剩余空间。 通常我会在第二列
我对流体有点陌生，我想在流体中创建以下 php 语句。 if ($var == 'something') { // do something } elseif ($other-var == 's
仅当属性值 fileEn 时，我才尝试输出我的元素为 NULL ( fileEn => NULL ) {file} 然而，这也向我展示了 fileEn 不是 NULL 的元素! 最佳答案
简短的版本:我有一个元素，我需要定义一个 DIV，它将水平重复，然后在空间不足时换行到下一行(类似表格的网格)。我见过提到 jQuery.GridLayout，但演示/主页是 404，所以我不知道这是
我想不通 - 但我相信有人可以...我正在研究将新的流体宽度设置为 100%，并为内容包装器设置最小和最大宽度。 当页眉区域未设置为 overflow:hidden 时会出现问题 - 会出现一个大的水
我正在为一部即将上映的电影设计一个网站，但在让它适应所有浏览器窗口大小和屏幕大小方面遇到了一些问题。本质上，例如初始页面的标记在页面顶部有电影 Logo ，在其下方有一个视频(电影预告片)，然后是一个
我正在构建一个由 50% 宽度的 div 和 25% 宽度的 div 组成的流动网站，我遇到的问题是对齐问题，尤其是与 Chrome。 我已经在这里上传了代码:http://tekulated.com
我正在尝试使用 twitter bootstrap 为我的网站做一个垂直的双色调背景(使用 css 渐变)，这样渐变在连续流体的跨度之间的排水沟的中心结束。我已经有了渐变代码(如下所示)，并且正在尝试
最近开始使用bootstrap，遇到如下问题:出现水平滚动条应该早得多。下面屏幕截图中的红色方 block 显示了表格旁边的空白区域没有填充任何信息，隐藏表/div。 HTML
我正在努力让这个布局稍微流畅一些。我希望#logo 位于#infobot 的右下角，其大小由我想随浏览器窗口缩放的图片决定。 #white 应该只是掩盖#logo 左侧的区域。如何让#white 和#
我们收到了一位客户的奇怪请求。他们想要一个特别的 的内容以图标为中心。居中本身不是问题，图标也不是。 问题是我找不到将 居中的方法s 的宽度可变，图标没有左对齐。 所以我们正在努力实现您在 http
我的网站有后台问题。我们的想法是不使用任何媒体查询，而是将所有内容都设置在 % 上，以便它始终可以在任何设备上查看。 我的问题是，背景图像确实具有适用于 with 的正确 css，但高度由 div 中
我正在对这个站点进行一些样式调整 http://neondataskills.org/ 我添加了一个顶部栏图像，现在，当您调整页面大小时，顶部栏图形如果太宽就会与导航重叠。我想强制图像将导航栏向下推。
我创建了一个带有面板和面板主体的容器。当我在桌面上查看该站点时，它看起来还不错。但是我在手机上看的时候，右边好像有一个很大的空间，什么也没有。 描述问题的图片 http://snag.gy/ApnWS
我有这样的布局: /*Sidebar*/ /*Column1*/ /*Column2*/ /*Column3*/ /*Sidebar*/ 所以现在我想做一个流畅的布局，在台式电脑上看起来不错，但在缩小
我是一名优秀的程序员,十分优秀！