说你们有一份文章清单, 有些有右浮图, 很小的文字, 所以图像会浮在文章之外, 下篇文章里,把事情搞砸。
有哪些正确/首选/最佳方法确保条款内的内容不浮出其外?
我知道 < code> overflow: hidden 有效, 但这是正确使用吗? 还是它只是碰巧做了我想要的事?
你有三个方法可以做到:
您可以有 overflow:hidden ,这是干净的方法。
元件: 如果容器有定义尺寸, 则剪切内容, < em> 和从内部元素中剪切阴影 < / em > 。
div <-- style="overflow:hidden"
div <-- floating children
div
div <-- style="overflow:hidden"
div <-- floating children
div
您可以在有浮点的容器后有一个空白元素, 通常是 < code@ lt; div> 。 使用 < code> clear: both 进行样式。
在国防部有"死亡元素"
div
div <-- floating children
div
div <-- style="clear:both"
div
div <-- floating children
div
您可以在容器中添加一个“ 清除” 类, 并使用 < code> : after 伪类来添加“ 清除动态点/ 空间” 。 基本上它和第二个一样, 但使用 < code> 来插入一个有“ 清除: ” < a href= > 的空间 。 http:// perishablepress. com/ new- clearfix- hack/" rel=" no folpol" > 这篇文章解释了它 < / a > 。
cons : " classitis" (过度使用班级),:以下的 在IE7 和更长的版本中不支持,因此使用 CSS 黑客
div <-- :after
div <-- floating children
div
" " <-- style="clear:both"
div <-- :after
div <-- floating children
div
您可以使用其中的任何一个, 它们都非常有效。 我通常使用大部分时间, 如果容器有阴影, 或者容器有固定尺寸, 我使用 3 。 方法 3 依赖于 < code > : 在新的 之后。 为了支持这个清晰的链接, 您会使用文章中所描述的旧 CSS 黑客 。
每个文章元素都添加 < code> clear: both; . 这将确保图像不会在下篇文章中“ 渗漏 ”, 但也确保图像不会被再次截断 。
"http://www.impressivewebs.com/overflor-hidden- problem/" rel="no follow" >这个链接解释你所要求的。
溢出: 隐藏或溢出: 自动将是一个可接受的解决方案, 用于清除小元素的浮点, 如持有浮点列表项目的导航栏, 或含有一堆浮点框的呼叫对行动区域 。
连结也解释了使用溢出问题: 隐藏在演示中清除 。
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!