6

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

小提琴

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

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

在此处输入图像描述

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

下面的屏幕截图说明了我想要得到的内容：

在此处输入图像描述

一些重要的点：

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

我想只使用css来做到这一点。欢迎使用 CSS3。（我知道如何使用 javascript 做到这一点）

4

6 回答 6

3

您可以使用 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;
}

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

参考：

于 2013-09-23T13:13:03.880 回答
1

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

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

于 2013-09-23T11:37:06.677 回答
0

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

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

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

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

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

对于那些属于我描述的用例的人，这是一个工作小提琴

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 */
}
于 2013-09-23T11:16:08.403 回答
0

我认为如果没有 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 的最大宽度设置为等于您的第一个元素，并将内容类添加到每个元素。我想您正在动态添加元素。

于 2013-09-23T11:34:00.650 回答
0

我得到了解决方案！

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

工作小提琴

相关链接

于 2014-02-14T08:05:05.623 回答
0

查看我对 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/

于 2013-09-23T10:07:14.873 回答