如何获取包含div的子元素的宽度？

Question

我希望fave_hold保留100％的div，但我希望.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%;
}

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

这是截图。

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

这是在线原型。

Answer 1

您的孩子被设置为float，因此他们不在流动状态，家长会忽略他们的身材 我会采用其他方法删除float并使用flex。

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

从position:relative移除.bookmark_page和'浮动' 所以你离开了这样的东西：

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

我会考虑将孩子的width（.bookmark_page）设置得更高，可能是260px。

结果：

Answer 2

你可以在你的收藏中使用display: inline-flex。