use*_*963 5 css responsive-design
我试图让一个图标浮动在有换行符的液体文本容器上。
问题是，当换行时，文本结束之前和div结束的地方有很大的差距。这使我的浮动元素从间隙结束的地方开始。
有没有办法让 div 只有其内容的大小？
检查此代码笔：https ://jsfiddle.net/e38edtdy/1/ 调整输出区域的大小以查看空间间隙。该按钮将自动调整其大小以查看间隙。
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>