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

SASS

let email = "foo@bar.com"

let url = URL(string: "mailto:\(email)")
UIApplication.sharedApplication().openURL(url)

或css

$width:100px;

.focusBox {
  width: $width;
}

.subFolderBox {
  width: $width;
}

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以将 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>

Answer 4

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

4 个答案: