背景不填充div（仅在txt后面），不想使用css3（只是普通的旧css）[重复]
Posted
技术标签:
【中文标题】背景不填充div（仅在txt后面），不想使用css3（只是普通的旧css）[重复]【英文标题】：Background does not fill on div (only behind txt), don't want to use css3 (just plain old css) [duplicate] 【发布时间】：2013-11-02 10:45:24 【问题描述】：我的背景没有填满我想要的：它只填在 txt 后面，而不是 div 的整个高度。 有两个 div 内联，并带有一个包装器。 右边的 div 有一个通过 CSS 的背景。但它没有填满..
它很简单，但我被困住并感到羞愧（或疲倦和匆忙）-grrr- 让它与 css3 一起工作，但它对我的一些“访问者/客户”等来说是新的。
这里是：
<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>
<div class="container">
<p> TEST TEST</p>
<div class="wrapper">
<div class="wrapper-img">
<img src="images/paper-for-info-menu-left.gif" />
<!-- End wrapper img--></div>
<div class="wrapper-content-img">
Lorem Ipsum Test Txt - Where is my background?
<img src="images/paper-for-info-menu-right.gif" />
<!-- End wrapper content img--></div>
<!-- End container --></div>
</body>
</html>
【问题讨论】：
谢谢，那个帖子确实有我想要的答案！ 【参考方案1】：元素的高度始终受其父元素的限制，因此请确保为html、body 和其他父元素设置min-height。如果您想要全尺寸背景，请考虑将background-image 设置为body
【讨论】：
【参考方案2】：最明显的解决方案是将 wrapper-content-img 显示属性更改为 inline-block：
.wrapper-content-img
display: inline-block;
如果您不喜欢这样做，您可以随时欺骗它（不那么干净，但仍然有效）调整内容的高度（在本例中为填充）：
.wrapper-content-img
display: inline;
margin: 0;
padding: 13px 0px 14px;
【讨论】：
这行得通，我更喜欢内联块而不是填充。作为个人选择。以上是关于背景不填充div（仅在txt后面），不想使用css3（只是普通的旧css）[重复]的主要内容，如果未能解决你的问题，请参考以下文章