文章/答案/技术大牛

发布

社区首页 >问答首页 >css网格系统中的模态定位

问css网格系统中的模态定位
EN

Stack Overflow用户

提问于 2019-10-14 08:13:54

回答 1查看 649关注 0票数 0

我试图集中定位一个模式，它的按钮在网格列2中被点击。谁能帮我指出正确的方向吗？当然，我不想硬编码任何边距(响应)。

现在，它(绿色div)只显示/限制在网格-列2，如下图所示。

display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
margin: 10px;

class Login extends Component {
  state = {
    isShowModal: false
  };

  openModal = () => {
    this.setState({ isShowModal: true })
  }

  render() {
    const { isShowModal } = this.state;
    return (
      <>
        <div className="grid-1">
        </div>
        <div className="grid-2">
        {isShowModal && <Modal />}
          <div className="add">
            <button onClick={() => this.openModal()} type="button">Open modal</button>
          </div>
        </div>
      </>
    )
  }
}

css

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-14 08:40:36

嗨，我想你正在寻找的是宽度最大-内容与一些填充和保证金0px汽车。

margin: 0px auto;
width: max-content;
padding: 10px;
max-width:100%; //for responsive purposes.

然后做一个周围的div并定位它固定。并将上述样式应用于周围div内的div。

这是做了一个周围的div，你可以设计你的东西在其中将居中。

备注:如果您的div在其他元素下面下降，只需将z-索引设置为1。

z-index:1;

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58372612

复制

相似问题

问css网格系统中的模态定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css网格系统中的模态定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css网格系统中的模态定位
EN