javascript - 我怎样才能得到这个包含 div 来获取它的子元素的宽度？

Question

我希望 fave_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>

这是CSS

#fave_hold{
  width: 100%;
  height: 100%;
}
.faves{
  height: 100%;
}

我试过摆弄显示器无济于事。

这是截图。

最终目标是使内容居中。这就是我想要的方式。

这是在线原型(prototype)。

Answer 1

你的 child 被设置为float所以他们不流动， parent 会忽略他们的大小。
我会采用不同的方法并删除 float 并使用 flex。

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

并从 .bookmark_page 中删除 position: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);
}

通过这些更改，您应该得到如下结果:

在小屏幕上:

编辑

how do I get rid of the mess at the bottom of each child element now?

我刚注意到你指的是底部的 child “乱七八糟”。
您可以通过这种方式设置 .faves 以获得您想要的内容:

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

我会考虑将 child 的宽度 (.bookmark_page) 设置得高一点，也许是260px。

结果: