调整浏览器窗口大小时调整div的大小
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了调整浏览器窗口大小时调整div的大小相关的知识,希望对你有一定的参考价值。
我有3个div。每个都低于另一个。每个'应该'调整浏览器窗口大小时调整大小,但只有最后一个正确调整大小。
div#content {
height: 100%;
width: 100%;
position: relative;
background-size: cover;
background-color: pink;
font-family: arial;
}
div#block-wrapper {
min-height: 300px;
min-width: 100px;
background-color: orange;
}
div.group {
border: 1px solid black;
position: absolute;
width: 100%;
background-color: lightgreen;
}
div.heading {
font-size: 2em;
position: absolute;
margin: 50px 0px 50px 50px;
line-height: 50px;
width: 250px;
height: 50px;
background-color: black;
}
div.heading h4 {
color: white;
position: relative;
margin: 0px 0px 0px 25px;
}
div.content {
margin: 150px auto;
}
div.bar {
margin: 25px 25px 25px 25px;
float: left;
position: relative;
width: 200px;
height: 20px;
background-color: darkgrey;
}
<div id="content">
<div id="block-wrapper">
<div class="group">
<div class="heading">
<h4>Level 1</h4>
</div>
<div class="content">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<div id="block-wrapper">
<div class="group">
<div class="heading">
<h4>Level 2</h4>
</div>
<div class="content">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<div id="block-wrapper">
<div class="group">
<div class="heading">
<h4>Level 3</h4>
</div>
<div class="content">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
</div>
答案
通过改变位置来修复:绝对到位置:相对并使每个组浮动:左
以上是关于调整浏览器窗口大小时调整div的大小的主要内容,如果未能解决你的问题,请参考以下文章
在 Tailwind 中调整窗口大小时如何避免 div 混乱?