divの幅をsass/cssを使って別のdivに設定するにはどうすればいいですか？

Question

私は最初の要素を持っている：

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

それはCSSです：それは、CSSです

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

：

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

及び第二の要素

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

どのように最初の要素の幅をsassまたはcssを使用して2番目に設定しますか？

Answer 1

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>

ようにそれを行うことができます

Answer 2

SASS

$width:100px; 

.focusBox { 
    width: $width; 
} 

.subFolderBox { 
    width: $width; 
} 

やCSS

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

Answer 3

問題を解決するコードを確認してください。

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

 
.eqWrap { 
 
\t display: flex; 
 
} 
 

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

 
.eq:nth-of-type(even) { 
 
\t 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>