Question

我正在制作一个带有google工作表或任何简单网络应用程序的编辑器应用程序，顶部有一个薄的屏幕工具栏，下面还有其他内容。但是......我在工具栏中定位项目时遇到问题。我计划放置：

左上角的徽标
中间的东西
右侧有两个按钮，具有特定顺序（如按钮A和B，其中B靠近屏幕的右边缘）

最重要的是，我想将工具栏中的项目垂直放置在中心。

我尝试了很多东西，但没有什么真正有用，除了下面我想放置物品的非常基本的网格系统：

.layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 34% 33% auto;
  grid-template-rows: 50px auto;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "searchbox resultbox editorbox";
}

.toolbar {
  grid-area: toolbar;
}

.searchbox {
  grid-area: searchbox;
}

.resultbox {
  grid-area: resultbox;
}

.manju-editor {
  grid-area: editorbox;
}

你能告诉我怎样才能按上述方式定位物品？

编辑：每个请求也添加了HTML，应用程序是使用create-react-app创建的，因此html是其标准index.html，应用程序被“分配”到根目录：

的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

来自app.js的渲染方法：

  <div className={userSession.layout.name}>
    {userSession.layout.toolbar.active && <div className="toolbar">
      {this.generateComponents("toolbar")}
    </div>}
    {userSession.layout.search.active && <div className="searchbox">
      search
    </div>}
    {userSession.layout.results.active && <div className="resultbox">
      result
    </div>}
    {userSession.layout.editor.active && <div className="editor">
      editor
    </div>}
  </div>

Answer 1

您可以尝试这样的事情：

/* 
 * containing div, position is relative, set the div height here 
 */

.toolbar {
  position: relative;
  height: 30px;
}

/* 
 * all 3 children have absolute positioning
 */

.left {
  position: absolute;
  left: 0px;
  top: 0px;
}

.right {
  position: absolute;
  right:0px;
  top:0px;
}

.middle {
  position: absolute;
  top: 0px;
  /* center the element */
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

<div class="toolbar">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

Answer 2

好的，找到了答案。它是here并正在工作：）

将项目放在网格区域中

2 个答案: