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

最新推荐文章于 2025-10-11 16:04:15 发布

原创最新推荐文章于 2025-10-11 16:04:15 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

琐碎的开发日记同时被 3 个专栏收录

9 篇文章

订阅专栏

web

5 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一种利用CSS实现div元素横排布局的方法，通过设置white-space:nowrap和display:table或inline-block属性来实现子元素撑开父元素宽度的效果，并提供了一个在线示例。

部署运行你感兴趣的模型镜像

这里针对的都是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会失效：

目标：

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

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

<!DOCTYPE HTML>
<html>
<head>
<style>
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;
}
</style>

</head>
<body>
<div id="container">
<div id="inncontainer">
<div id="in1" class="inner">a</div>
<div id="in2" class="inner">b</div>
</div>
</div>
</body>
</html>