[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)

有几种做法 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章