如果在div的情况下如何首先按高度增加框尺寸然后按宽度增加框尺寸?

时间:2017-12-26 11:21:58

标签: javascript jquery html css css3

.box {
  background-color: DarkSeaGreen;
  padding: 0px;
  margin: 0px;
  float: left;
  min-height: 50px;
  min-width: 50px;
  max-height: 100px;
  max-width: 100px;
}
<div class="box">
  ab cd ef gh ij kl mn
</div>

在上面的代码中,我们使用min-heightmin-width作为50,max-heightmax-width作为100。

默认情况下,如果我开始放置文本,默认行为是DIV框将首先在宽度级别增加大小.i.e。首先,它会将宽度从50增加到100,然后它将开始增加高度。

我想知道我们是否可以更改订单。即首先是高度,然后是宽度。

即。首先它应该从最小高度增长到最大高度。一旦达到最大高度,它应该开始增加宽度。

1 个答案:

答案 0 :(得分:0)

原因是因为您的浏览器默认使用writing-mode的CSS属性:horizo​​ntal-tb。文字从左到右,然后从上到下填充框,这是我们在大多数西方世界中写字的方式。如果您将CSS更改为书写模式:vertical-lr,文本将从上到下然后从左到右填充框。在这种情况下,你填充看到框去到它的最大高度,然后开始增加宽度,直到你达到极限。

另见https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode