草庐IT

img_float

全部标签

html - 如何强制 <img> 占用宽度,即使未加载图像

我正在加载一堆img,我希望它们占用文档空间,即使它们没有加载,或者尚未完成加载也是如此。我尝试指定宽度和高度(它们本身都作为属性,并且在样式属性中),但发现如果不加载图像将不会占用空间,这令人沮丧。当然,必须有一种方法可以强制img达到特定尺寸,**即使该图像无法加载也是如此。谢谢 最佳答案 当然有:此外,在style="/*css*/"属性中指定宽度和高度不起作用的原因是因为默认情况下图像是内联元素。如果您指定了display:block,图像就会接受width和height值。如果你添加,到css/style:display:

html - 文本环绕 float 的 div 但边框和 <hr/> 不环绕

我有一个div是float:right它在父div中。有p元素也在同一个父div中,文本环绕float:rightdiv正确。但是,如果我设置p元素有边框,或者做一个,边框不会在文本停止的地方停止,而是延伸到float:right后面分区这是一个漂亮的mspaint描述:注意黑色横线的绿色部分在floatdiv的后面。如何获取边框或或者任何与文本一样宽的东西,而不是在div后面? 最佳答案 我知道这个问题是前段时间发布的,但我今天遇到了同样的问题并找到了另一个解决方案:http://jsfiddle.net/MvX62/我使用bor

javascript - img onload 在 IE7 中效果不佳

我的webapp中有一个img标签,它使用onload处理程序来调整图像大小:这在Firefox3中工作正常,但在IE7中失败,因为图像对象被传递给SizeImage()由于某种原因,函数的宽度和高度为0——也许IE在完成加载之前调用了该函数?。在对此进行研究时,我发现其他人也遇到过与IE相同的问题。我还发现这不是有效的HTML4。这是我们的文档类型,所以我不知道它是否有效:是否有一种合理的解决方案可以在加载图像时调整其大小,最好是符合标准的解决方案?该图像用于用户上传自己的照片,几乎可以是任何尺寸,我们希望以最大150x150的尺寸显示它。如果您的解决方案是在上传时调整图像服务器端的

javascript - 如何保持 float div 在窗口调整大小时居中 (jQuery/CSS)

有没有办法(不绑定(bind)到window.resize事件)在调整浏览器窗口大小时强制floatDIV重新居中?为了帮助解释,我想伪代码应该是这样的:div.left=50%-(div.width/2)div.top=50%-(div.height/2)更新我的查询已在下面得到回答,我想发布我的探索的最终结果-一个jQuery扩展方法,允许您将任何block元素居中-希望它也能帮助其他人。jQuery.fn.center=function(){varcontainer=$(window);vartop=-this.height()/2;varleft=-this.width()/2

html - 内联 SVG - 通常用于 < img > SEO 的 "alt"标签的最佳替代品?

这个问题在这里已经有了答案:Accessibility:recommendedalt-textconventionforSVGandMathML?(7个答案)关闭6年前。假设我要换出一个在我的主站点标题中改为使用SVG。通常我会依赖的alt标签。是SVG这种类型转换的“alt”的最佳替代方法是什么?[titlehere][longdescriptionhere]...

html - 具有自己的流程的 CSS float 注释

更新我提供了赏金,但从未获得正确答案。我已经实现了一个适合我的JS解决方案,但我现在还不打算将答案标记为正确。如果仅使用CSS/HTML是可能的,我仍然很乐意看到它。但普遍的共识是目前不可能。目标CodePenhere,底部的可运行代码段。我有一些HTML内容,我想在其上方直接float一条小消息进行注释,在最左侧,有点像注释(但不完全是)。可以有很多内容,每个内容都有自己的注释。内容必须遵循正常的文本流。这是我当前的HTML:nopeIt'sabird,stillnoit'saplane,yeah!it'sSuperman!muahahaGogettheKryptonite工作示例下

html - Bootstrap 布局中的 float div

我需要使用Boostrap做这样的事情。页面上的“流动”内容包含两个小部件-第一个在右上角,第二个在左下角。Widget1很简单——我只需要class="pull-right"。但是要如何处理第二个才能将其置于页面底部并保持“内容”float?style="bottom:0;"不起作用:有了这个代码...Widget1......Widget2.......alotofcontent....结果是这样的:向下移动Widget2也无济于事:...Widget1.......alotofcontent.......Widget2...关于如何在不进行肮脏的黑客攻击的情况下做到这一点的任何想

html - 设置 img src ="about:blank"是否有效?

背景:我需要一个inline元素,我可以通过CSS向其应用宽度和高度。据我所知,目前img是实现此行为的唯一方法。我不想让图像指向服务器上的透明像素GIF。它可能被缓存,但浏览器仍然对其进行排队,从而降低了整体页面速度。其他客户端可能根本没有缓存。PS不,floatdiv是不够的,它的行为与内联元素不同。编辑抱歉,我应该在某处插入术语“跨浏览器”。它必须至少适用于FF≥2、IE≥7和当前的Safari。 最佳答案 您可以使用"data:"URIscheme嵌入图像。其他替换元素也可能有效。将显示设置为“inline-block”可能

android - 三星 Galaxy 平板电脑不允许将 float 输入到 "number"类型的输入中

我们的客户希望我们为输入字段显示数字键盘,所以基本上我创建了一个如下字段:但是,GalaxyTablet会删除“.”并合并其前后的数字,还禁用“。”在键盘中。有没有其他方法可以解决此问题或在使用type="text"时在输入字段中显示数字键盘?注意:我尝试使用pattern属性(适用于iPhone)。我在装有Android2.1+的各种Android设备上测试了这个问题。我在任何其他HTC和三星设备上都没有遇到此错误。 最佳答案 是的,还有另一种方法。方式1:不使用type="number"而使用type="text"方法2:仅适用

html - 具有负边距的 float 元素会导致文本换行错误?

这看起来像是webkit中的文本换行错误,还是我遗漏了什么?DOM:noseatakimatasanctusestestestLorem...CSS:div{width:200px;}p{margin-right:32px;padding-left:30px;}img{float:left;margin-left:-30px;}演示:http://jsbin.com/onoced/1/edit截图: 最佳答案 正如您所指出的,我不会说这是一个错误:它在WebKit浏览器中的行为相同。否则我们必须将浏览器引擎之间的每一个差异都归类为错