0

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

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

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

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

请告知必要的更改。

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

3 回答 3

0

.item1是一个块级元素，默认情况下占用其父级宽度的 100%。

您可以将元素的显示类型更改为or ：.item1tableinline-block

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

这是小提琴。

注意：如果 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

于 2013-08-28T20:36:36.603 回答
0

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

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

向左飘浮

于 2013-08-28T20:37:51.033 回答
0

另一种方法是使用fit-contentCSS 属性的值width。但是只有 Firefox 和 Chrome 支持它……</p>

例子 ：

.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-28T20:49:18.953 回答