我有第一个元素:
<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 将第一个元素的宽度设置为第二个?
最佳答案
您可以将 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>
动态版:
.second_div,
.first_div {
border: 1px solid black;
padding: 2px 4px;
display: inline-block;
}
.wrapper {
display: inline-grid;
grid-auto-flow: column;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
margin: 20px 0;
}
<div class="wrapper">
<div class="first_div">A very very very very long text</div>
<div class="second_div">A word</div>
</div>
<div class="wrapper">
<div class="first_div">A very very very very long text</div>
<div class="second_div">A word</div>
<div class="second_div">A word word word</div>
</div>
<div class="wrapper">
<div class="first_div">A very very very very long text</div>
<div class="second_div">A word</div>
<div class="second_div">A word</div>
<div class="second_div">A word word word</div>
</div>
关于css - 如何使用 sass/css 将 div 的宽度设置为等于另一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40787790/