[css]如何让⼀个元素div1的宽度由⼦元素的宽度决定，并超出
⽗元素div0
这⾥针对的都是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）
⽐较好的做法是给div1使⽤css：
white-space:nowrap;/*如果没有这⼀条，⼦元素会⾃动换⾏*/
display: table; //or inline-block
div1的⼦元素使⽤：
display: inline-block;
vertical-align: top;/*使它看起来和float:left⼀样，默认是底部对齐，对于⾼度不⼀样的⼦div会有影响*/
//如果使⽤float:left; 将会失效，⽆法撑宽div1，仍然是两⾏顺便推荐⼀个不错的在线测试⽹站：
html:
-----------------------------------
div border属性
<!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>
参考的⽐较多，其他的不到了：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。