关于html:后台不填写div(仅在文本后面),不想使用css3(只是普通的旧css)

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>
&nbsp;&nbsp;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;
}


元素的高度总是受其父元素的限制,因此请确保为htmlbody和其他父元素设置min-height。如果你想要一个完整的背景,考虑为body设置background-image