容器w/o Jquery中的可调整大小的div

Question

好吧-所以我有点纠结于这个。我认为，我正在努力实现一些相当直接的目标。在不使用Jquery的固定宽度容器div中需要3个可调整大小的div。调整大小只需要对所有div进行水平调整，因为它们都具有父div高度。这是布局

    <div id="container">
        <div id="m1">M1</div>
        <div id="m2">M2</div>
        <div id="m3">M3</div>
    </div>

我在这里的目标是将它封装到一个ReactJS组件中，因此不想用Jquery来混水摸鱼。如有任何帮助/指导，将不胜感激。如果有人能模仿这样的反应，那也太棒了！:)

不确定这是否是CSS唯一的解决方案，但我愿意接受一些想法。

谢谢

Answer 1

我不太清楚您的问题，如果您的容器div是固定的宽度(就像常量一样)，那么您的子div不应该动态地调整大小，不管容器以外的任何东西的宽度是多少。

我唯一能解释你问题的方法是，你需要某种网格系统，在那里你可以拖动来调整容器范围内子div的宽度。在这种情况下，我可能错了，但我不认为解决方案那么简单，您可能想看看这个包：https://github.com/STRML/react-grid-layout

更具体地说，它们最简单的实现允许您定义一个固定宽度容器(在本例中为1200)，如下所示：

  <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
    <div key={'a'}>a</div>
    <div key={'b'}>b</div>
    <div key={'c'}>c</div>
  </ReactGridLayout>

Answer 2

如果您想要修复父div的大小，然后根据父div自动调整内部div的大小，可以使用flex框布局，您可以在这里找到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

在这种情况下，可以将第一个div的样式设置为：

.container {
  display: flex;
}

对于子类(在您的例子中由m1、m2和m3标识)，您需要将css属性flex-grow设置为您希望它相对于其他属性的大小。比方说，如果您希望m1和m2具有相同的大小，而m3的大小是原来的两倍，那么您可以执行以下操作：

#m1, #m2 {
  flex-grow: 1;
}
#m3 {
  flex-grow: 2;
}

根据您想要做的事情，您可能需要考虑重命名ids/类。

如果您希望获得div的父级的确切大小，您可以这样做：

render() {
  return <div ref="node"></div>
}

componentDidMount() {
   const parentWidth = this.refs['node'].parentNode.clientWidth;
   // Do whatever you need here (like setting state of the react component)
}