Javascript 不带Jquery的容器中可调整大小的div

好吧，所以我有点纠结于此。我想我正在努力实现一些非常直接的目标。在一个固定宽度的容器div中，我需要3个可调整大小的div，而不需要使用Jquery。由于所有div都具有父div高度，因此只需水平调整所有div的大小。这是布局图

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

M1
平方米
M3

我的目标是将其包装到一个ReactJS组件中，因此不想用Jquery混淆视听。任何帮助/指导都将不胜感激。如果有人能在React中模拟这样的东西，那也太棒了！：）

不确定这是否是一个CSS唯一的解决方案，但我是开放的想法

---

谢谢

我不太清楚您的问题，如果您的容器div是固定宽度（如常量值），那么您的子div不应该动态调整大小，无论容器以外的任何内容的宽度是多少

我唯一能解释你的问题的另一种方式是，你需要某种网格系统，你可以通过拖动来调整容器范围内子div的宽度。在这种情况下，我可能是错的，但我认为解决方案没有那么简单，您可能想看看这个包：

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

A.
B
C

如果您想固定父级

div

的大小，然后让内部

div

s根据父级

div

自动调整大小，您可以使用弹性盒布局，您可以在这里找到：

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

.container {
  display: flex;
}

对于孩子（在您的案例中，由

m1

、

m2

和

m3

标识），您需要将css属性

flex grow

设置为您希望它相对于其他属性的大小。比如说，如果您希望

m1

和

m2

具有相同的大小，并且

m3

是两倍大，您可以执行以下操作：

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

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

取决于您想做什么，您可能需要考虑重命名IDS类。< /P> 如果您希望获得

div

父级的确切大小，可以按以下步骤执行：

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

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

render（）{
返回
}
componentDidMount（）{
const parentWidth=this.refs['node'].parentNode.clientWidth；
//在此处执行您需要的任何操作（例如设置react组件的状态）
}

好的，我不是100%确定你的解决方案最后应该是什么样子，你能拍张照片吗？嗯。。CSS解决方案？给容器100%的宽度，给每个子分区33%的宽度？如果外部分区是固定宽度，为什么内部分区会调整大小？NKJo28-先生，您是学者和绅士。祝你的部落兴旺发达。这正是我想要实现的“能够在受限的父div中调整div的宽度”。