html 子元素宽度不超出,[css]如何让一个元素div1的宽度由子元素的宽度决定,并超出父元素div0...

这篇博客探讨了如何在CSS中实现块元素横排,并在父元素宽度有限的情况下,让子元素的内容决定其宽度。通过设置`white-space: nowrap;`和`display: inline-block;`,可以避免子元素自动换行并撑开父元素的宽度。同时提到了`float`布局的局限性,并推荐了一个在线CSS测试工具帮助理解这些概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里针对的都是block的元素

div0

div1

div1_1

div1_2

我希望做到的比较奇葩:

主要目的是使div横排

若div0的宽度够大,超过div1_1, div1_2的总和,则可以直接使用网上搜到的解决方案:使用float:left

在div1有一个较窄的父元素的情况下,希望div1的宽度可以由子元素撑开,超过父元素的宽度。。

div1中有并列的横排div1_1, div1_2

如果对div1_1, div1_2使用

float: left;

将会撑不开div1,自动换行,float会失效:

0818b9ca8b590ca3270a3433284dd417.png

目标:

0818b9ca8b590ca3270a3433284dd417.png

block元素的默认宽度是上一个指定宽度的父元素的宽度。

若希望能动态的生成一个由内容决定的宽度(这个问题叫shrinking wrap)

有几种做法 http://haslayout.net/css-tuts/CSS-Shrink-Wrap

比较好的做法是给div1使用css:

white-space:nowrap;/*如果没有这一条,子元素会自动换行*/

display: table; //or inline-block

div1的子元素使用:

display: inline-block;

vertical-align: top;/*使它看起来和float:left一样,默认是底部对齐,对于高度不一样的子div会有影响*/

//如果使用float:left; 将会失效,无法撑宽div1,仍然是两行

顺便推荐一个不错的在线测试网站:

http://jsfiddle.net/

html:

http://jsfiddle.net/PZT47/1

-----------------------------------

div{

border: 2px solid black;

margin: 5px

}

#container{

width : 200px;

height : 200px;

position : relative;

background : yellow;

overflow: visible;

}

#inncontainer{

white-space:nowrap;

display: inline-block;

background: cyan;

width: auto;

height : 190px;

}

#in1{

height:70px;

}

#in2{

height:80px;

}

.inner{

display: inline-block;

width:90px;

position : relative;

background: red;

}

a
b

参考的比较多,其他的找不到了:

http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值