Как установить ширину div, равную другой div, используя sass/css?

Question

У меня есть первый элемент:

<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?

Answer 1

им не уверены в CSS/СКС, но если вы предпочитаете с 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

дерзость

$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>