Background does not fill on div (only behind txt), don't want to use css3 (just plain old css)
本问题已经有最佳答案,请猛点这里访问。
我的背景并没有填满我想要的样子:它只填充在txt后面,而不是整个分区的高度。里面有两个带包装的潜水器。右DIV有一个通过CSS的背景。但它不能填满……
这很简单,但我感到困窘和羞耻(或是疲劳和匆忙)——GRRR-让它和CSS3一起工作,但对我的一些"访客/客户"来说是新的。
这里是:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <style type="text/css"> <!-- body { font: 100%/1.4 Helvetica, Verdana, Arial, sans-serif; background: #FFF; margin: 0; padding: 0; color: #000; } .container { width: 100%; background: #FFF; margin: 0; padding:0; } .wrapper { display: inline-block; width:75%; float:right; text-align:right; margin:0; padding:0; } .wrapper-img { display:inline; margin:0; padding:0; width:7px; height:45px; } .wrapper-content-img { display:inline; margin:0; padding:0; width: 100%; height: 45px; background-image:url(images/paper-for-info-menu-right.gif); /*background-size:100%;*/ } .stretch { width:100%; height:100%; } --> </style> </head> <body> <p> TEST TEST </p> <img src="images/paper-for-info-menu-left.gif" width="7" height="45" alt="" /> <!-- End wrapper img--> Lorem Ipsum Test Txt - Where is my background? <img src="images/paper-for-info-menu-right.gif" width="" height="45px" alt="" /> <!-- End wrapper content img--> <!-- End container --> </body> </html> |
最明显的解决方案是将包装内容img display属性更改为inline块:
1 2 | .wrapper-content-img { display: inline-block;} |
如果您不喜欢这样做,您可以一直欺骗它(不是很干净,但仍然有效)调整内容的高度(在本例中是填充):
1 2 3 4 5 | .wrapper-content-img { display: inline; margin: 0; padding: 13px 0px 14px; } |
元素的高度总是受其父元素的限制,因此请确保为