第二个孩子的分隔符

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的新内在和外在宽度值（在这个cas中的最小内容），虽然它不支持在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

Answer 2

看看我对小提琴链接的最新评论。我也在html中改变了一些东西。在第一个div中设置了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 3

重要 这个答案可能不是对您有用，但可以帮助谁也有类似问题的其他用户。

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

注意：如果家长没有真正舒展，会导致问题。例如， ，将直接在父级之后出现的内容将显示在.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 4

我不认为如果没有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; 
} 

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

Answer 5

理想的情况下，对于一个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 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