[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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值