javascript - 根据另一个元素拟合一个元素-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 06:48:51

25

4

我试图在页眉标题周围放置两个 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 一点信心都没有，我使用它只是因为其他人就是这样做的。

最佳答案

我认为你把事情搞得太复杂了。我删除了很多代码并添加了 flexbox为标题。旁边的两个 div 都允许 grow在空间允许的范围内。

: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;
}

<div class="header">
  <div class="header-info">
    <p>
      Hi
    </p>
  </div>
  <div class="header-title">
    <h1>Welcome</h1>
  </div>
  <div class="header-info">
    <p>
      Hi
    </p>
  </div>
</div>

关于javascript - 根据另一个元素拟合一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53033947/

25

4

0

文章推荐： Python 的 .group() 只返回第一个匹配项

文章推荐： c - 如何命名一个好的/有意义的类型？

文章推荐： python - 随机短语创建器

嵌套函数的 Gnuplot 拟合
gnuplot 中拟合函数的正确方法是什么 f(x)有下一个表格吗？ f(x) = A*exp(x - B*f(x)) 我尝试使用以下方法将其拟合为任何其他函数: fit f(x) "data.txt
pytorch动态神经网络(拟合)实现
（1）首先要建立数据集 ? 1
r - 如何使用非线性函数拟合数据并绘制数据并使用 ggplot() 拟合
测量显示一个信号，其形式类似于具有偏移量和因子的平方根函数。如何找到系数并在一个图中绘制原始数据和拟合曲线？ require(ggplot2) require(nlmrt) # may be thi
r - 对正弦模型进行非线性最小二乘 (nls) 拟合
我想将以下函数拟合到我的数据中: f(x) = Offset+Amplitudesin(FrequencyT+Phase)，或根据 Wikipedia : f(x) = C+alphasin(ome
c# - 拟合 Akima 样条曲线
我正在尝试使用与此工具相同的方法在 C# 中拟合 Akima 样条曲线:https://www.mycurvefit.com/share/4ab90a5f-af5e-435e-9ce4-652c95c
javascript - 添加功能之前的 OpenLayers 拟合
问题:开放层适合 map ，只有在添加特征之后(视觉)，我该如何避免这种情况？我在做这个第 1 步 - 创建特征 var feature = new ol.Feature({...}); 第 2
javascript - 拟合 D3 图表的数据以创建图例
我有一个数据变量，其中包含以下内容: [Object { score="2.8", word="Blue"}, Object { score="2.8", word="Red"}, Objec
python - 拟合 RandomForestClassifier 时内存使用量激增
我正在尝试用中等大小的 numpy float 组来填充森林 In [3]: data.shape Out[3]: (401125, 5) [...] forest = forest.fit(data
matlab - 使用 lsqcurvefit 拟合
我想用洛伦兹函数拟合一些数据，但我发现当我使用不同数量级的参数时拟合会出现问题。这是我的洛伦兹函数: function [ value ] = lorentz( x,x0,gamma,amp )
matlab - 区分居中和缩放的 Polyfit 拟合
我有一些数据，我希望对其进行建模，以便能够在与数据相同的范围内获得相对准确的值。为此，我使用 polyfit 来拟合 6 阶多项式，由于我的 x 轴值，它建议我将其居中并缩放以获得更准确的拟合。但
python - 拟合 beta 二项式
我一直在寻找一种方法来使数据符合 beta 二项分布并估计 alpha 和 beta，类似于 VGAM 库中的 vglm 包的方式。我一直无法找到如何在 python 中执行此操作。有一个 scipy
numpy - 拟合 scipy.optimize 参数的错误
我将 scipy.optimize.minimize ( https://docs.scipy.org/doc/scipy/reference/tutorial/optimize.html ) 函数与
python - 拟合 Von Mises 分布的圆形直方图
在过去的几天里，我一直在尝试使用 python 绘制圆形数据，方法是构建一个范围从 0 到 2pi 的圆形直方图并拟合 Von Mises 分布。我真正想要实现的是: 具有拟合 Von-Mises 分
python - Keras 拟合 LSTM 在循环中变得更慢
我有一个简单的循环，它在每次迭代中都会创建一个 LSTM(具有相同的参数)并将其拟合到相同的数据。问题是迭代过程中需要越来越多的时间。 batch_size = 10 optimizer = opti
Python/Scipy kde 拟合、缩放
我有一个 Python 系列，我想为其直方图拟合密度。问题:是否有一种巧妙的方法可以使用 np.histogram() 中的值来实现此结果？ (请参阅下面的更新) 我目前的问题是，我执行的 kde 拟
python - 拟合 Keras L1 模型
我有一个简单的 keras 模型(正常套索线性模型)，其中输入被移动到单个“神经元”Dense(1, kernel_regularizer=l1(fdr))(input_layer) 但是权重从这个模
python - 拟合 sklearn GridSearchCV 模型
我正在尝试解决 Boston Dataset 上的回归问题在random forest regressor的帮助下.我用的是GridSearchCV用于选择最佳超参数。问题一我是否应该将 Grid
python - Python 中的交互式 BSpline 拟合
使用以下函数，可以在输入点 P 上拟合三次样条: def plotCurve(P): pts = np.vstack([P, P[0]]) x, y = pts.T i = np.aran
python - 拟合 3D 点 python
我有 python 代码可以生成数字 x、y 和 z 的三元组列表。我想使用 scipy curve_fit 来拟合 z= f(x,y)。这是一些无效的代码 A = [(19,20,24), (10,
r - 使用 fitdistrplus 拟合 Gumbel 分布
我正在尝试从 this answer 中复制代码，但是我在这样做时遇到了问题。我正在使用包 VGAM 中的gumbel 发行版和 fitdistrplus . 做的时候出现问题: fit = fi

首页

博学

6Ren·AI

商城

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