我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到我的范围table.
小智 2322
解决方案是将您设置div为display: inline-block.
but*_*oxa 325
你想要一个块元素,它具有CSS调用的缩小宽度,而规范并没有提供一种有福的方式来获得这样的东西.在CSS2中,缩小到适合不是目标,而是意味着处理浏览器"必须"凭空捏造宽度的情况.那些情况是:
没有指定宽度时.我听说他们想在CSS3中添加你想要的东西.现在,请使用以上其中一项.
不直接公开该功能的决定可能看起来很奇怪,但有一个很好的理由.它是昂贵的.缩小到适合意味着格式化至少两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算整个内容的宽度.另外,人们可能不会像人们想象的那样经常使用缩小到合适的元素.为什么你需要额外的桌子？也许你只需要表格标题.
mbi*_*ard 221
我觉得用
display: inline-block;
会工作,但我不确定浏览器的兼容性.
另一个解决方案是将您包装div在另一个中div(如果您想保持块行为):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
Sal*_*bas 212
display: inline-block 为您的元素添加额外的余量.
我会推荐这个:
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖励:你现在也可以#element通过添加来轻松地将这个花哨的新东西放在中心位置margin: 0 auto.
nik*_*3ro 85
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack - 跨浏览器支持内联块样式(2007-11-19).
Son*_*tos 83
对我有用的是:
display: table;
在div.(在Firefox和谷歌浏览器上测试过).
Vit*_*nko 80
你可以试试fit-content(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
Shu*_*bib 73
有两个更好的解决方案
display: inline-block;
要么
display: table;
这两个display:table;更好.
因为display: inline-block;您可以使用负边距方法来修复额外的空间
tro*_*jan 42
你的问题的答案在未来奠定了我的朋友......
即"内在"即将推出最新的CSS3更新
width: intrinsic;
不幸的是,IE支持它,所以它还不支持它
更多关于它:CSS内在和外在大小模块3级,我可以使用吗？:内在和外在尺寸.
现在你必须满意<span>或<div>设置为
display: inline-block;
fal*_*tro 40
不知道在什么情况下,这将出现,但我相信,CSS-style属性float要么left还是right会产生这样的效果.另一方面,它也会产生其他副作用,例如允许文本在其周围浮动.
如果我错了,请纠正我,我不是百分百肯定,目前无法自己测试.
Sov*_*iut 34
CSS2兼容的解决方案是使用:
.my-div
{
min-width: 100px;
}
你也可以浮动你的div,这将迫使它尽可能小,但如果你的div内的任何东西是浮动的,你需要使用一个clearfix:
.my-div
{
float: left;
}
小智 29
只需将宽度和高度设置为 fit-content 即可。这很简单。
div {
width: fit-content;
height: fit-content;
padding: 10px;
}
我正在添加填充：10px；。如果省略它，div 元素将完全粘在表格上，看起来有点笨拙。填充将在元素的边框与其内容之间创建给定的空间。但这是您的愿望，而不是强制性的。
Ali*_*eza 26
好吧,在许多情况下你甚至不需要做任何事情,因为默认div height和widthauto 都有,但如果不是你的情况,应用inline-block显示将为你工作...看看我为你创建的代码,它是做的你在找什么:
div {
display: inline-block;
}<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>you*_*rrr 22
这已在评论中提及,很难在其中一个答案中找到:
如果您display: flex出于任何原因使用,您可以使用:
div {
display: inline-flex;
}
Sho*_*rua 21
你可以试试这个代码。按照 CSS 部分中的代码进行操作。
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>Cod*_*ker 20
尝试使用width: max-content属性根据内容大小调整 div 的宽度。
试试这个例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
Edw*_*ard 19
<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 inline hacks,他们有点在一些div中工作但是在其他人没有,所以,真的只是更容易将扩展div放入一个表......并且......它可以具有或不具有内联属性,并且表仍然是将保持内容总宽度的表.=)
RPi*_*oli 19
您可以使用inline-block@ user473598,但要注意旧版浏览器..
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla根本不支持内联块,但是它们-moz-inline-stack大致相同
一些跨浏览器的inline-block显示属性:https:
//css-tricks.com/snippets/css/cross-browser-inline-block/
您可以在以下网址中查看使用此属性的一些测试:https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Abr*_*hin 15
这是一个工作演示 -
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>小智 15
只需将样式放入CSS文件即可
div {
width: fit-content;
}
小智 13
我的CSS3 flexbox解决方案有两种形式:顶部的那个表现得像一个跨度,底部的表现就像一个div,在包装器的帮助下占据所有宽度.他们的课程分别是"顶部","底部"和"底部包装".
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.Jai*_*ave 12
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父div宽度与最大元素宽度相同.
小智 12
试试display: inline-block;.要使其与浏览器兼容,请使用以下css代码.
div {
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
}<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>Ham*_*eni 10
篡改Firebug我发现了属性值-moz-fit-content,它完全符合OP的要求,可以按如下方式使用:
width: -moz-fit-content;
虽然它只适用于Firefox,但我找不到任何与Chrome等其他浏览器相同的功能.
小智 8
div{
width:fit-content;
}<div>
<table>
</table>
</div>我display: inline-block通过在span标签内添加div标签,并将CSS格式从外部div标签移动到新的内部span标签,解决了类似的问题(我不想使用,因为项目居中).如果display: inline block对你来说不合适,那就把它当作另一种选择.
我们可以在div元素上使用以下两种方式中的任何一种:
display: table;
要么,
display: inline-block;
我更喜欢使用display: table;,因为它自己处理所有额外的空间.虽然display: inline-block需要一些额外的空间固定.
.outer{
width:fit-content;
display: flex;
align-items: center;
}
.outer .content{
width: 100%;
}
<div class=outer>
<div class=content>
Add your content here
</div>
</div>
修改(如果您有多个孩子,则有效):您可以使用jQuery(查看JSFiddle链接)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
别忘了包含jQuery ......
如果你有容器破线,在几小时后寻找一个好的CSS解决方案并找不到,我现在使用 jQuery代替:
$('button').click(function(){
$('nav ul').each(function(){
$parent = $(this).parent();
$parent.width( $(this).width() );
});
});nav {
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
display: inline;
}
/* needed style */
ul {
padding: 0;
}
body {
width: 420px;
}
/* just style */
body {
background: #ddd;
margin: 1em auto;
}
button {
display: block;
}
nav {
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
}
li {
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<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>| 归档时间： |
|
| 查看次数： |
1345244 次 |
| 最近记录： |