Question

我试图将两个div放在标题标题周围，但似乎无法正常工作。我不确定calc（）是否可以与javascript配合良好。这是到目前为止的代码：

document.getElementByClass('Header').clientWidth;

:root {
  --main-accent-color: #3500D3;
  --main-bg-color: #282828;
  --secondary-bg-color: #0c0032;
  --main-content-bg-color: #190061;
  --text-color: #ffffff;
  --alt-color: #240090;
}

* {
  box-sizing: content-box;
  margin: 0;

}

body {
  background-color: var(--main-bg-color);
}

h1 {
  font-family: robot0, sans-serif;
  font-size: 70px;
  font-weight: 100;
  font-variant: petite-caps;
  color: var(--text-color);
}

.header {
  background-color: var(--main-bg-color);
  width: 100%;
  height: 100px;
  top: 0;
  margin: 0;
  position: fixed;
  text-align: center;
  z-index: 10;
  border-bottom: 5px solid var(--main-accent-color);
}

.header-title {
  box-sizing: content-box;
  background-color: var(--main-bg-color);
  height: 85px;
  width: 500px;
  margin: auto;
  vertical-align: middle;
  padding-top: 50px;
  padding-top: 20px;
  border-left: 5px solid var(--main-accent-color);
  border-right: 5px solid var(--main-accent-color);
  z-index: 11
}

.header-info {
  width: calc((clientWidth - 500) / 2);
  height: 100px;
  display: inline-block;
  position: absolute;
  margin: 0;
  padding: 0;
}

#right-info {
  right: calc(((clientWidth - 500) / 2) + 500);
}

#left-info {
  right: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Webpage</title>
    <script>
      document.getElementByClass('header').clientWidth;
    </script>
  </head>
  <body>
    <!--Header-->
    <div class="header">
      <div class="header-title">
        <h1>Welcome</h1>
      </div>

      <div class="header-info" id="left-info">
        <p>
        Hi
        </p>
      </div>
      <div class="header-info" id="right-info">
        <p>
        Hi
        </p>
      </div>
    </div>


  </body>
</html>

如果我可以使用其他方法，那就太好了。另外，我现在正在学习CSS，所以我对JavaScript完全没有信心，我只使用了它，因为其他人是这样做的。

Answer 1

我认为您使它变得太复杂了。我删除了很多代码，并为标题添加了flexbox。侧面的两个div都允许grow尽可能多的空间。

this.setState((state) = > ({
      selectedList: [...(state.selectedList || []), institution]
    }));

:root {
  --main-accent-color: #3500D3;
  --main-bg-color: #282828;
  --secondary-bg-color: #0c0032;
  --main-content-bg-color: #190061;
  --text-color: #ffffff;
  --alt-color: #240090;
}

* {
  box-sizing: content-box;
  margin: 0;
}

body {
  background-color: var(--main-bg-color);
}

h1 {
  font-family: robot0, sans-serif;
  font-size: 70px;
  font-weight: 100;
  font-variant: petite-caps;
  color: var(--text-color);
}

.header {
  width: 100%;
  height: 100px;
  top: 0;
  position: fixed;
  border-bottom: 5px solid var(--main-accent-color);
  display: flex;
  align-items: center; /* Vertical alignment */
}

.header-title {
  width: 500px;
  border-left: 5px solid var(--main-accent-color);
  border-right: 5px solid var(--main-accent-color);
  text-align: center;
}

.header-info {
  flex-grow: 1;
}

根据另一个元素拟合一个元素

1 个答案: