Question

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

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

现在，如果我将display: inline-block应用于父元素，那么它具有第二个子元素的宽度。

enter image description here

为了不发生这种情况，我在第二个子元素上尝试了break-word，word-break css属性，但仍无用。

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

enter image description here

一些要点：

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

我想用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 for IE和旧版本。

参考：

Answer 2

理想情况下，HTML代码段的布局样式如下：

<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

重要 的这个答案可能对你没用，但可以帮助其他有类似问题的用户。

你可以拥有你想要的相同外观，但没有真正拉伸父高度。在第二个position:absolute;上使用div。

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

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

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

对于那些属于我所描述的用例的人来说，这是一个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的max-width设置为等于你的第一个元素，并将内容类添加到每个元素。我想你是在动态添加你的元素。

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

打破第二个孩子div的字母

6 个答案: