打破第二个孩子div的字母

Question

我有一个要求，我需要将宽度应用于父元素，该宽度等于第一个子元素的宽度。如果父元素只有一个子元素，则可以使用display: inline-block 或float: left 轻松实现这一点。但是我在一个 div 中有两个以上的子元素。像这样的：

Fiddle

<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 的新内在和外在宽度值（本例中的 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;
}

---

我猜在最坏的情况下，您可以将它用于较新的浏览器和用于 IE 和旧版本的 JS。

参考：

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

Answer 2

理想情况下，HTML sn-p 的布局样式如下：

<div class="main">
    <div class="first">first</div>
    <div class="value">firstvaluevalue</div>
    <div class="value">second value value</div>
    <div class="value">third valuevalue</div>
    <div class="value">valuevalue on the fourth line</div>
</div>

可以使用以下 CSS 实现：

.main {
    display: inline-block;
    background-color: cornflowerblue;
    position: relative;
    width: 50px;
}
.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;
    margin: 1.00em 0;
}

如图：http://jsfiddle.net/audetwebdesign/tPjem/

但是，我必须将.main 的宽度设置为.first 元素的宽度才能使word-break 属性生效。

这里的 CSS 渲染问题是你希望 .value 兄弟的宽度等于 .first 的未知宽度，这不能单独使用 CSS。

CSS 渲染本质上是一种从上到下的一次性算法，这意味着父元素不能从子元素继承值（表格有多次算法，但这在这种情况下无济于事）。这可能会在未来的 CSS 版本中发生变化，但我们需要根据这些限制进行设计。

JavaScript/jQuery 解决方案是从 .first 获取宽度并将其应用到 .main 并将其绑定到窗口调整大小操作。

在某些方面，如果.first 包含一个具有固有高度和宽度的图像，这个问题似乎是有意义的。如果是这种情况，将.main 的宽度设置为合理的值，然后缩放.first 中的图像以填充.main 块的宽度可能是有意义的。

在不了解更多实际内容的情况下，很难想出替代方案。

Answer 3

查看我对 Fiddle 链接的最新评论。我也更改了 html 中的一些内容。确实在第一个 div 中设置了值 div 以使用它的宽度，并为值 div 添加了自动换行。

.main {
    display: inline-block;
    background-color: cornflowerblue;
    position: relative;
}
.first {
    width: 50px;  /* I don't know this width */
    position: relative;
    background-color: grey;
}

.first p {
    margin-bottom: 30px;
    margin-top: 0;
}

.value {
    max-width: 100%;
    word-wrap:break-word;
    background-color: cornflowerblue;
}

html:

<div class="main">
    <div class="first">
        <p>first</p>
        <div class="value">valuevalue</div>
    </div>
</div>

http://jsfiddle.net/jxw4q/12/

Answer 4

重要 此答案可能对您没有用，但可以帮助遇到类似问题的其他用户。

您可以拥有与您想要的相同的外观，但不会真正拉伸父级高度。通过在第二个div 上使用position:absolute;。

注意：如果父母没有真正伸展，它会导致问题。 例如，直接出现在父元素之后的内容将显示在.first 元素之后。造成重叠。

如果这是页面中唯一的内容，并且您希望第二个 div 将其宽度调整为第一个，您仍然可以使用它。

（我不认为这是你的情况，但也许它会帮助其他可能遇到这个问题的用户。） 无论如何，我认为您唯一的选择是使用 Script。

对于那些属于我描述的用例的人，这里是Working Fiddle

HTML：（这里没有变化）

<div class="main">
    <div class="first">First div set the width</div>
    <div class="value">second fiv should wrap if bigger then first</div>
</div>

CSS：

.main
{
    display: inline-block;
    position: relative;
}
.first
{
    background-color: gray;
}
.value
{
    position: absolute;
    background-color: cornflowerblue; /* moved here */
}

Answer 5

我认为如果没有 JavaScript 的帮助，您将无法实现它。想象一下以下标记和 css：

<div class="main">
       <div class="first content">first</div>
       <div class="second content">valuevalue</div>
</div>

然后是下面的css：

.main{
    background-color : red;
    display: inline-block;
    max-width: 50px;
}
.first{
    background-color : blue;
}
.second{
    background-color : green;
}
.content{
     word-break: break-word;
}

现在您要做的就是将 .main div 的最大宽度设置为等于您的第一个元素，并将内容类添加到每个元素。我想您正在动态添加元素。

Answer 6

我得到了解决方案！

HTML

<div class="main">
    <div class="first">first</div>
    <div class="value">valuevalue</div>
</div>

CSS

.main {
    overflow:hidden;
    width:1px;
    display:table;
    background-color: cornflowerblue;
}
.first {
    width: 50px;    /* I don't know this width */
    height: 50px;    /* I don't know this height */
    background-color: grey;
    display: inline-block;
}
.value {
    word-break: break-all;
}

Working Fiddle

Related link