时间戳

首页 > 解决方案 > 如何垂直向上增加班级的高度？

html - 如何垂直向上增加班级的高度？

问题描述

这段代码可以成功地向下增加一个类的高度。但我似乎不能向上做。我试着给高度一个负值，它没有用。

我想用颜色向左填充一个班级将面临同样的问题。

.b1,
.b2,
.b3,
.b4 {
  height: 300px;
  width: 20%;
  float: left
}

.b1 {
  background-color: lawngreen;
}
.b2 {
  background-color: maroon;
  margin-top: 300px;
}

.b3 {
  background-color: mediumturquoise;
}

.b4 {
  background-color: orange;
  margin-top: 300px;
}

.b1:hover {
  height: 600px;
  transition: 1s;
}

.b2:hover {

  height: 600px;
  transition: 1s;
}

.b3:hover {
  height: 600px;
  transition: 1s;
}

.b4:hover {
  height: 600px;
  transition: 1s;
}

 <!DOCTYPE html>
 <html>
 <head>
    <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Box model</h1>
    <div class="container">
        
        <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div>
        <div class="b4">4</div>
        

</div>

</body>
</html>

我想用颜色向左填充一个班级将面临同样的问题。

标签： htmlcss

解决方案

推荐阅读