Question

我的父宽度占据父元素的整个100％宽度。

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

请注意，红色边框的父宽度大于绿色颜色子元素的总宽度。我想折叠父宽度。

请告知必要的更改。

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;
}

Answer 1

.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" />

更多信息：http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Answer 2

Item1将始终扩展到其父级的宽度，因为它设置为display：block。

解决此问题的一种方法是添加到Item1：

浮动：左

Answer 3

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

示例：

width

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

3 个答案: