Question

我想让它们整个屏幕水平占据正方形并适合它。它们适合的时刻，因为它们是内联块，但在某些屏幕尺寸上（或者如果你缩小一点），它们将在右边留下一个<250px的空间。

我可以给他们，例如，width:25%;，但我怎么能让他们成为正方形？如何将高度设置为等于动态宽度？

.note {
  display: inline-block;
  /*
#F3F389-galben
#96C0FF albastru
#94F1B6 verde
rosu#f40042
     */
  background-color: #f40042;
  width: 250px;
  height: 250px;
  margin-left: 25px;
  margin-top: 25px;
  padding: 0;
}
textarea {
  width: 80%;
  height: 60%;
  display: block;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  resize: none;
  background: rgba(0, 0, 0, 0.13);
  border: none;
  padding: 5px;
  font-family: 'Rancho', Helvetica, sans-serif;
  font-size: 15px;
}

<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>

Answer 1

我不知道使用HTML，CSS做任何可行的方法。您需要使用脚本将div /元素的高度设置为与动态宽度

相同

var w = $('.note').width();
$('.note').css({'height':w + 'px'});

Answer 2

以％表示宽度，然后通过给出元素padding-bottom: 100%;来创建相等的高度。

使方格div占据整个屏幕

2 个答案: