如何将父元素的宽度折叠为子元素的总宽度

我的父宽度占用了父元素的整个100％宽度。如何将父元素的宽度折叠为子元素的总宽度

相反，我希望父宽度折叠为子元素的总宽度。

的jsfiddle：http://jsfiddle.net/z9Unk/232/

通知红色边框宽度父母怎么比绿色COLORE子元素的总宽度。我想折叠父宽度。

请告知必要的更改。

HTML

<div class="item1"> 
    <div class="item2"> 
     item2 
    </div> 
    <div class="item2"> 
     item2 
    </div> 
</div>

CSS：

.item1 { 
    position:relative; 
    white-space: nowrap; 
    width:auto; 
    overflow: hidden; 
    border:2px solid red; 
} 

.item2 { 
position:relative; 
    display:inline-block; 
    background-color: green; 
    width : 255px; 
    height : 205px; 
    margin-right:6px; 
    border:1px solid blue; 
}

来源

2013-08-28 GJain

谢谢大家...我得到它固定 – GJain

标记该工作最适合你的答案的问题的方法。谢谢:) –

.item1是块级元素，其通过取默认其父的宽度的100％。

你可以显示.item1元素的改变类型table或inline-block：

.item1 { 
    /* other CSS declarations */ 
    /* display: inline-block; */ /* Or */ 
    display: table; 
}

这里是Fiddle。

注：如果Internet Explorer不兼容性视图运行，就不会有没问题。

然而，迫使IE在标准模式下运行，你可以添加以下<meta>标签在<head>部分：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

来源

2013-08-28 20:36:36

希望你没有与Internet Explorer的问题 –

@Roger检查我的更新;） –

的项目1将一直扩展到的宽度，其父母，因为它被设置为显示：块。解决这个问题

一个办法是增加项目1：

浮动：左

来源

2013-08-28 20:37:51

另一种方法是使用fit-content值的CSS属性width。但它是由Firefox和Chrome只支持...

例子：

.item1 { 
    position:relative 
    white-space: nowrap; 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    overflow: hidden; 
    border:2px solid red; 
}

来源

2013-08-28 20:49:18 vdubus

如何将父元素的宽度折叠为子元素的总宽度

回答

相关问题