Question

当尝试浮动元素或显示内联时，它们会消失。不知道为什么会这样。这些属性看起来非常简单。任何输入都会很棒

＆＃13;

body {
  background-color: grey;
}

.divison1 {
  background-color:blue;
  min-width: 100px;
  min-height: 100px;
}
.division2 {
 background-color: green;
 max-width: 100px;
 min-height: 100px;
}

＆＃13;

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
<div class = "divison1"></div>
</body>
</html>

＆＃13;

Answer 1

将max-height更改为min-height

你的div的高度是0，因为它是空的

body {
  background-color: grey;
}

.divison1 {
  background-color:blue;
  min-width: 100px;
  min-height: 100px;
}

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
<div class = "divison1"></div>
</body>
</html>

Answer 2

将max-height更改为min-height。 max-height只将div的最大高度设置为100px，但此处需要设置min-height以将一些内容放入div中

＆＃13;

body {
  background-color: grey;
}

.divison1 {
  background-color:blue;
  min-width: 100px;
  min-height: 100px;
}

＆＃13;

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
<div class = "divison1"></div>
</body>
</html>

＆＃13;

显示内联块或水平定位而不是垂直定位

2 个答案: