我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
我知道人们有时不喜欢表格,但我必须告诉你,我尝试了css内联技巧,它们在一些div中有点奏效,但在其他div中没有,所以,将扩展的div封装在表格中真的很容易。。。和它可以有内联属性,也可以没有内联属性,但表仍然是保持内容总宽度的表。=)
其他回答
第二部分{宽度:配合内容;}<div><表></table></div>
如果你有容器破坏了行,在几个小时后寻找一个好的CSS解决方案,但没有找到,我现在使用jQuery代替:
$('按钮').click(函数){$('nav ul').each(函数){$parent=$(this).parent();$parent.width($(this).width());});});导航{显示:内联块;文本对齐:向左;/*不会做任何事,不像一些人可能会猜测的那样*/}上一页{显示:内联;}/*所需样式*/上一页{填充:0;}正文{宽度:420px;}/*恰到好处的风格*/正文{背景:#ddd;边距:1em自动;}按钮{显示:块;}导航{背景:#bbb;边距:1rem自动;衬垫:0.5rem;}李{显示:内联块;宽度:40px;高度:20px;边框:实心薄#777;边距:4px;背景:#999;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>修复</button><导航><ul><li>3个</li><li></li><li>1个</li><li>4个</li></ul></nav><导航><ul><li>3个</li><li></li><li>1个</li><li>4个</li><li>1个</li><li>5个</li><li>9个</li><li>2个</li><li>6个</li><li>5个</li><li>3个</li><li>5个</li></ul></nav>
我通过在div标记中添加span标记,并将CSS格式从外部div标记移动到新的内部span标记,解决了一个类似的问题(我不想使用display:inline块,因为项目居中)。如果display:inline块不是适合您的答案,那么就把它作为另一个备选方案。
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父div宽度与最大元素宽度相同。
CSS2兼容解决方案应使用:
.my-div
{
min-width: 100px;
}
您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:
.my-div
{
float: left;
}