这里针对的都是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>
参考的比较多，其他的找不到了：
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
