如何使用 sass/css 设置 div 的宽度等于另一个 div？答案

【问题标题】：How to set div's width equal to another div using sass/css?如何使用 sass/css 设置 div 的宽度等于另一个 div？
【发布时间】：2021-01-30 02:28:42
【问题描述】：

我有第一个元素：

 <div layout="column" layout-align="start center" class="focusBox flex "></div>

这是css：

.focusBox {
 margin-top: 2%;
 border: 1px solid $alto;
 height: calc(100vh - 182px);
 background-color: $white;
}

第二个元素：

<div flex class="subFolderBox" ></div>

这是css：

.subFolderBox {
  margin-bottom: 1%;
  border: 1px solid $alto;
}

如何使用 sass 或 css 将第一个元素的宽度设置为第二个？

【问题讨论】：

标签： css sass

【解决方案1】：

您可以将display: inline-grid 与包装器一起使用。不需要javascript。列完全相等。

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

.wrapper {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
</div>

【讨论】：

轻松优雅，+1
感谢您的回答，这个回答给了我灵感，让我保持 2 个divs 的宽度同步，这些宽度彼此重叠。

【解决方案2】：

我不确定 css/scss，但如果你更喜欢 jquery，你可以这样做

$(document).ready(function() {
  $(".second_div").css({
    'width': ($(".first_div").width() + 'px')
  });
});

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="first_div">First Div some text</div>
<div class="second_div">Second.width </div>

【讨论】：

没有 jquery？

【解决方案3】：

sass

$width:100px;

.focusBox {
  width: $width;
}

.subFolderBox {
  width: $width;
}

或css

.focusBox, .subFolderBox {
  width: 100px;
}

【讨论】：

你没有得到问题
你想获取focusBox的宽度并在subFolderBox上设置相同的宽度吗？
没有。只有一次潜水，它的一些兄弟包括第二个 divm，我需要像第一个一样设置宽度。我知道我可以使用js获取元素宽度，但希望有css方式。
以上答案是问题的答案：如何将两个元素设置为相同的宽度，而不是问题的答案：如何根据元素的宽度设置一个元素的宽度其他元素。

【解决方案4】：

请检查我解决问题的代码。

.paddingBlock {
	padding: 20px 0;
}
.equalHW{ background:red; margin-right:10px;}

.eqWrap {
	display: flex;
}

.equalHW {
	flex: 1;
}
.eq {
	padding: 10px;
}
.eq:nth-of-type(odd) {
	background: yellow;
}

.eq:nth-of-type(even) {
	background: lightblue;
}

<div class="paddingBlock">
  <div class="equalHWrap eqWrap">
    <div class="equalHW eq">boo00000000000 <br> boo</div>
    <div class="equalHW eq">shoo</div>
    <div class="equalHW eq">clue</div>
  </div>
</div>

【讨论】：