打破第二个孩子div的字母

Question

我有一个要求,我需要将宽度应用于父元素,该元素等于第一个子元素的宽度.这可以通过使用可以轻松实现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属性.

我想要获得的内容将在以下屏幕截图中说明:

一些要点:

• 父元素的宽度应该等于第一个子元素.
• 父元素的高度应等于所有子元素的总和.
• 我不知道第一个子元素的宽度.
• (编辑)第一个子元素有一些固定的宽度和高度.我不知道这些价值观.

我想用css做这个.css3是受欢迎的.(我知道如何使用javascript做到这一点)

Answer 1

您可以使用 CSS3 的新内在和外在宽度值（此 cas 中的 min-content ）轻松实现此目的，尽管 IE 不支持它，所以它不是一个可行的选择，但我将发布此内容，因为有趣的是我们将能够将来这样做：

http://jsfiddle.net/S87nE/

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 和旧版本。

参考：

• http://dev.w3.org/csswg/css-sizing/#width-height-keywords
• http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent