所以我正在制作一个布局非常有问题的网站。有四个Angular图像TL、TR、BL和BR用黑色block表示。深橙色区域是主要内容(宽度为960px)，绿色箭头表示的外部区域是浏览器窗口。看图:Diagramhttp://dotcafedesigns.com/stackoverflow/problem.gif最上面的图片表示站点尽可能窄-如果它大于定义的区域，则不应允许比此(960px)更窄，则不应有滚动条。底部的两个图像代表浏览器的不同宽度。左下角和右下角的黑色block(图像)应始终位于屏幕的左下角和右下角，除非宽度降至960px，在这种情况下，BL和BR图像应略微插入主要区域.如果
所以我正在制作一个布局非常有问题的网站。有四个Angular图像TL、TR、BL和BR用黑色block表示。深橙色区域是主要内容(宽度为960px)，绿色箭头表示的外部区域是浏览器窗口。看图:Diagramhttp://dotcafedesigns.com/stackoverflow/problem.gif最上面的图片表示站点尽可能窄-如果它大于定义的区域，则不应允许比此(960px)更窄，则不应有滚动条。底部的两个图像代表浏览器的不同宽度。左下角和右下角的黑色block(图像)应始终位于屏幕的左下角和右下角，除非宽度降至960px，在这种情况下，BL和BR图像应略微插入主要区域.如果
我在CSS方面非常精通，但今天我偶然发现了一个让我头疼的片段(here和here)。我从没想过可以通过margin:0auto将绝对定位的元素居中，但考虑到所讨论的元素具有设置的宽度并且有left:0和对:0，它实际上似乎有效:#parent{background:#999;height:300px;position:relative;width:300px;}#child{background:#333;height:50px;left:0;margin:0auto;position:absolute;right:0;width:50px;}(JSFiddle)我一直认为left:0
我在CSS方面非常精通，但今天我偶然发现了一个让我头疼的片段(here和here)。我从没想过可以通过margin:0auto将绝对定位的元素居中，但考虑到所讨论的元素具有设置的宽度并且有left:0和对:0，它实际上似乎有效:#parent{background:#999;height:300px;position:relative;width:300px;}#child{background:#333;height:50px;left:0;margin:0auto;position:absolute;right:0;width:50px;}(JSFiddle)我一直认为left:0
非常简单的问题...我现在正在用float百分比对其进行破解(但我知道必须有更好的解决方案)请查看我的照片作为示例。我想让父级保持100%的宽度，搜索框是一个自动宽度，始终保持在搜索按钮旁边，我希望搜索按钮能够增长到它想要的宽度(取决于文本在里面/填充)。 最佳答案 更新(Flexbox方式!)现在实现这一目标的正确方法是使用Flexbox!CSS“Flexbox”方式(https://jsfiddle.net/1jxkyLdv/)/*CSS**********************************************
非常简单的问题...我现在正在用float百分比对其进行破解(但我知道必须有更好的解决方案)请查看我的照片作为示例。我想让父级保持100%的宽度，搜索框是一个自动宽度，始终保持在搜索按钮旁边，我希望搜索按钮能够增长到它想要的宽度(取决于文本在里面/填充)。 最佳答案 更新(Flexbox方式!)现在实现这一目标的正确方法是使用Flexbox!CSS“Flexbox”方式(https://jsfiddle.net/1jxkyLdv/)/*CSS**********************************************
为什么我这样做: 输入最终比IE6和FF3中的div宽2px？我错过了什么？编辑:正如许多人所说，边界是问题所在。如果我在输入上设置border:0px，它将与具有0px边框的div具有相同的宽度(通过将其包装在带边框的SPAN内进行验证)。但是，当我测量paint中的元素时，div有一个14px的内部空间，正如预期的那样(10+2+2)。然而，输入有一个16px的内部，然后在它外面有一个边框。为什么是这样？可能不是错误，因为它在IE6和FF3中都会发生，但我不明白。 最佳答案 我相信这正是浏览器呈现其标准输入的方式。如果
为什么我这样做: 输入最终比IE6和FF3中的div宽2px？我错过了什么？编辑:正如许多人所说，边界是问题所在。如果我在输入上设置border:0px，它将与具有0px边框的div具有相同的宽度(通过将其包装在带边框的SPAN内进行验证)。但是，当我测量paint中的元素时，div有一个14px的内部空间，正如预期的那样(10+2+2)。然而，输入有一个16px的内部，然后在它外面有一个边框。为什么是这样？可能不是错误，因为它在IE6和FF3中都会发生，但我不明白。 最佳答案 我相信这正是浏览器呈现其标准输入的方式。如果
我有以下内容:CSS:.photo{overflow:hidden;display:table-cell;vertical-align:middle;text-align:center;width:100px;height:100px;}HAML.photo%img{:src=>my_url}参见jsFiddlehere.我用来演示的图像是150pxx80px。我需要在.photodiv中显示图像并剪掉多余部分。图像需要垂直和水平居中。但是，display:table-cell导致.photodiv忽略我的宽度和高度设置。我该如何解决这个问题？ 最佳答案
我有以下内容:CSS:.photo{overflow:hidden;display:table-cell;vertical-align:middle;text-align:center;width:100px;height:100px;}HAML.photo%img{:src=>my_url}参见jsFiddlehere.我用来演示的图像是150pxx80px。我需要在.photodiv中显示图像并剪掉多余部分。图像需要垂直和水平居中。但是，display:table-cell导致.photodiv忽略我的宽度和高度设置。我该如何解决这个问题？ 最佳答案
