Question

好的 - 所以我有点挣扎。我想我正在努力实现一些非常直接的事情。我需要在固定宽度的容器div中使用3个可调整大小的div而不使用Jquery。只需要水平调整所有div的调整大小，因为它们都具有父div高度。这是布局

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

我的目标是将其包装成ReactJS组件，因此不想让Jquery混淆水域。任何帮助/方向将是最受欢迎的。如果有人可以在React中嘲笑这样的东西，那也太棒了！：）

不确定这是否只是一个CSS解决方案，但我对这些想法持开放态度

由于

Answer 1

如果您的容器div是固定宽度（如常量值），那么您的问题并不完全清楚，那么无论容器外的任何宽度如何，您的子div都不应动态调整大小。 / p>

我能解释你的问题的唯一方法是，你需要某种网格系统，你可以拖动来调整容器范围内子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自动调整大小，可以使用弹性框布局你可以在这里找到：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 / classes。

如果您希望获得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)
}

容器中的可调整大小的div没有Jquery

2 个答案: