Html 第二个孩子的破折号

我有一个要求，我需要对父元素应用宽度，它等于第一个子元素的宽度。如果父元素只有一个子元素，则可以使用父元素的

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实现这一点）

请看我对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

上的code>

注意：如果父对象没有真正拉伸，则会导致问题。 例如，直接位于父元素之后的内容将显示在

.first

元素之后。造成重叠的

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

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

对于那些属于我所描述的用例的人，这里有一个

HTML:（此处无更改）

---

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

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

---

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

理想情况下，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>

如图所示：

但是，我必须将

.main

的宽度设置为

.first

元素的宽度，以使

分词

属性生效

这里的CSS呈现问题是，您希望

.value

同级的宽度等于

.first

的未知宽度，这不能单独使用CSS来完成

CSS呈现本质上是一种从上到下的一次传递算法，这意味着父元素不能从子元素继承值（表有一个多次传递算法，但在这种情况下没有帮助）。这可能会在CSS的未来版本中发生变化，但对于未来版本，我们需要根据这些限制进行设计

JavaScript/jQuery解决方案是首先从

.first

获取宽度，并将其应用于

.main

并将其绑定到窗口重新调整大小操作

在某些方面，如果

。首先
包含具有固有高度和宽度的图像，则此问题似乎是有意义的。如果是这种情况，将
.main
的宽度设置为合理的值，然后在
中缩放图像。首先
填充
.main
块的宽度可能是有意义的

如果不了解更多关于实际内容的信息，就很难想出替代方案。
您可以通过CSS3新的内在和外在宽度值（cas中的最小内容）轻松实现这一点，尽管IE不支持它，因此，这不是一个可行的选择，但我将发布这篇文章，因为有趣的是，我们将能够在未来做到这一点：


HTML:


我想在最坏的情况下，你可以在更新的浏览器上使用它，在IE和旧版本上使用JS

参考：




我找到了解决办法

HTML

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


我无法更改第一个子元素的宽度。事实上，我不知道它的宽度。再次阅读我的帖子。最后一点。您正在为父元素指定宽度。。父元素的宽度必须等于第一个子元素的宽度（我不知道这个固定宽度）。我意识到，即使现在使用css3，这也是不可能的。您在HTML中做了很多更改。。这是我在这里做不到的。。顺便说一句，谢谢你的帮助：）为什么你不能更改html？这会解决你的问题，因为我改变了我的第一个答案：）哈哈，你完全改变了它。您正在为您案例中的父元素
.first
指定宽度，并且您没有为您案例中的第一个子元素
p
指定任何宽度或高度。这里的主要问题是我不知道第一个子元素的宽度和高度。你必须保持这个精确的DOM结构吗？你的第二个要求“父元素的高度应该等于第二/最后一个子元素”似乎意味着
.value
元素应该以某种方式确定父容器的高度，这似乎还意味着父容器应该忽略
.first
元素的高度。请c
<div class="main">
       <div class="first content">first</div>
       <div class="second content">valuevalue</div>
</div>

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

<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>

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

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

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

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

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