CSS div无内容扩展

我目前正在一个新的网站上工作，我遇到了问题。我有2 div的旁边eachother，一个内容和一个背景图像。CSS div无内容扩展

与内容的DIV是媒体链接自动在它的内容现在

扩大，一个与背景图像仅仅是设计，在它里面没有任何内容，我希望它与一个全自动扩大与内容，所以他们都有相同的高度。

这里有2个截图让我的问题更加清晰。

HTML：

 <div id="bubble"> 
      Stad Turnhout 
     </div> 

     <div id="date"> 
      <span class="created">created</span><br/><span class="date">okt<br/>2011</span> 
     </div> 

    </div> 

    <div id="slash"> 
    </div> 

    <div class="textfield"> 
     <p class="text"> 
      Text goes in here 
     </p> 

    </div>

CSS：

#slash { 
float:left; 
width:20px; 
height:auto; 
background:url(images/slash.jpg) no-repeat, url(images/socialbg.jpg) repeat;} 


.textfield { 
padding:25px; 
width:269px; 
height:auto; 
float:right; 
background:url(images/point.jpg) no-repeat, #FFF;}

我一直想几件事情，并试图找到对谷歌的东西，但没有是有用的。任何想法如何解决这个HTML/CSS？

感谢

编辑：加入我的代码

来源

2012-09-10 Jrn

告诉我们您的HTML/CSS – krish

向我们展示你的HTML和CSS或创建的jsfiddle演示 – Champ

检查此页面http：//www.w3schools .com/css/tryit.asp？文件名= trycss_background_shorthand2 – 2012-09-10 12:29:50

有使两个并排的DIV总是相同的高度和扩张没有真正的方法。你可以给这两个元素一个父包装，然后在该包装上设置一个高度，然后给这两个子div 100％的高度。它们的高度将由包装机的固定高度控制。

HTML：

<div class="wrapper"> 
     <div id="slash"></div> 

     <div class="textfield"> 
      <p class="text"> 
       Text goes in here 
      </p>  
     </div> 
    </div>

CSS：

.wrapper { 
     height: 350px; 
    } 
    #slash, .textfield { 
     height: 100% 
    }

来源

2012-09-10 12:40:58

感谢您的答案炖，但其工作不正常。我找到了解决方案，但我似乎无法将其实施到我的代码 http://jsfiddle.net/9sVKJ/ – Jrn

我已经得到它的工作。对于有同样问题的人，请检查： http://jsfiddle.net/9sVKJ/ – Jrn

CSS div无内容扩展

回答

相关问题