我有一个要求，我需要将宽度应用于父元素，该宽度等于第一个子元素的宽度。如果父元素只有一个子元素，则可以使用 display: inline-block 或 float: left 轻松实现这一点。但是我在一个div中有两个以上的子元素。像这样:
<div class="main">
<div class="first">first</div>
<div class="value">valuevalue</div>
</div>
现在，如果我将 display: inline-block 应用于父元素，那么它具有第二个子元素的宽度。
为了避免发生这种情况，我在第二个子元素上尝试了 break-word、word-break css 属性，但仍然没有用。
下面的屏幕截图说明了我想要获得的内容:
一些要点:
- 父元素的宽度应该等于第一个子元素。
- 父元素的高度应等于所有子元素的总和。
- 我不知道第一个子元素的宽度。
- (EDIT) 第一个子元素有一些固定的宽度和高度。我不知道这些值。
我只想使用 CSS 来完成此操作。欢迎使用 css3。 (我知道如何使用 javascript 执行此操作)
最佳答案
您可以使用 CSS3 的新内在和外在宽度值(此 cas 中的最小内容)轻松实现此目的，尽管 IE 不支持它，因此它不是一个可行的选择，但我将发布它，因为有趣的是我们将来可以做到这一点:
HTML:
<div class="main">
<div class="first">first</div>
<div class="value">valuevaluevalue</div>
</div>
CSS:
.main {
background-color: cornflowerblue;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
.first {
width: 50px; /* I don't know this width */
height: 50px; /* I don't know this height */
background-color: grey;
}
.value{
word-break: break-all;
}
我想在最坏的情况下，您可以将它用于较新的浏览器，将 JS 用于 IE 和旧版本。
引用:
关于html - 打破第二个 child div的字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18956530/