Javascript 我怎样才能让这个包含div的元素获得它的子元素的宽度？

我希望

fave\u hold

保持其包含div的100%，但我希望

.faves

仅具有其子元素的宽度。子元素是动态渲染的，并且具有定义的宽度

下面是React/JSX

  <div id = 'fave_hold'>
    {this.props.MenuFave.current === '1' &&
      <div className = 'faves' id = 'fave_hold_arc'  >
        {tags1}
      </div>
    }
    {this.props.MenuFave.current === '280' &&
      <div className = 'faves' id = 'fave_hold_news' >
        {tags280}
      </div>
    }
    {this.props.MenuFave.current === '268' &&
      <div className = 'faves' id = 'fave_hold_news' >
        {tags268}
      </div>
    }
  </div>
</div>

我试过摆弄显示器，但没有用

这是一个截图

最终目标是以内容为中心。这就是我想要做的

---

这是在线原型。

您可以在您的faves上使用

显示：内联flex

。

您的孩子被设置为

浮动

，因此他们不流动，家长将忽略他们的大小。
我会采用另一种方法，删除

浮动

，然后使用

flex

.faves {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

并从

.bookmark\u页面

中删除

位置：relative

和'float' 所以你离开的时候带着这样的东西：

 .bookmark_page {
    border-radius: 4px;
    width: 250px;
    margin: 6px;
    border: 6px solid white;
    box-shadow: 0px 1px 3px rgba(34,25,25,0.4);
    -webkit-box-shadow: 0px 1px 3px rgba(34,25,25,0.4);
}

通过这些更改，您将得到如下结果：

在小屏幕上：

编辑

现在我如何处理每个子元素底部的混乱

我刚刚注意到你指的是底部的儿童的“混乱”。
您可以通过这种方式设置

.faves

，以获得所需：

.faves {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

<>我会考虑设置孩子的<>代码>宽度>代码>（<代码> .BookMyPox）稍高一点，也许<代码> 260px。p>

.faves {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

结果是：

---

如果您想

.faves

获得其子项的

宽度，那么为什么要将其设置为
100%
（其父项）？您的
.bookmark\u页面设置为
float
，这将使其脱离“流”，并使其父项（
.faves
）忽略它们的大小。我会考虑另一种方法，可能使用
flex
。每个“行”中应该有多少个
.bookmark\u page
？使用
flex
它很简单，很灵活：）只要检查我的答案，你就会发现你可以玩
.faves
并更改为
调整内容：flex start或
对正内容：之间的空格等…@stackoverflow对不起，我刚注意到你指的是孩子们。看看我在答案中的编辑。你需要所有4个属性才能正确显示。你能更新你的答案吗。现在工作起来很顺利。你为什么不在最后的答案中列出全部4项？你指的是什么属性？