javascript - 将一个 div 居中并将右侧菜单附加到该 div

问题描述

我需要将一个主 div 居中并在该项目的右侧附加一个固定菜单。我需要主 div 保持在中心，右侧菜单需要“修复”到居中的 div。

目前，我flex用来使 div 居中，但这会导致两个项目都居中（这意味着主 div 并不是真正的居中）。

这是所需的布局：

当前布局：

代码如下所示（我正在使用带有样式组件的 React）：

容器：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

主分区：

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

菜单分区：

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

这呈现如下：

<DivContainer>
  <MainDiv />
  <MenuDiv />
</DivContainer>

标签： javascripthtmlcssreactjs

你可以把它包装在一个零宽度的 div 中，溢出可见：

#wrapper {
    display: flex;
    border: solid 3px green;
    justify-content: center;
}

#main {
    border: solid 2px orange;
    width: 50%;
}

#no-width {
    width: 0;
    overflow: visible;
}

#menu {
    width: 100px;
    border: solid red 2px;
}

<body>
  <div id="wrapper">
    <div id="main">
        Centered
    </div>
    <div id="no-width">
        <div id="menu">
            "Zero" width div, so doesn't affect centering
        </div>
    </div>
  </div>
</body>

javascript - 将一个 div 居中并将右侧菜单附加到该 div

问题描述

解决方案

推荐阅读