如何使用sass/css设置div的宽度等于另一个div？
如何使用sass/css设置div的宽度等于另一个div？
提问于 2016-11-24 21:34:19
我有第一个元素：
<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将第一个元素的宽度设置为第二个？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-11-24 21:49:28
我对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>
Stack Overflow用户
发布于 2016-11-24 21:37:43
萨斯
$width:100px;
.focusBox {
width: $width;
}
.subFolderBox {
width: $width;
}或css
.focusBox, .subFolderBox {
width: 100px;
}Stack Overflow用户
发布于 2021-01-30 02:28:43
您可以将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40787790
复制相关文章
相似问题
腾讯云开发者
