如何在保持绝对位置的同时使子div适应父div宽度?

我正在构建用于作业的网页。我有一个问题,我的孩子div的宽度超出了其父div的宽度。

所以我希望我的子div(称为<div class="dropdown-content">)具有绝对位置,因为它使子div与父div(称为<div class="box">)重叠。但是,子div的宽度并不相对于父div的宽度。

我尝试了{:{1}}上的相对位置,但是所有父div悬停时都会展开,以使子div与父div重叠。

那么如何在保持父div宽度不变的同时使子div与父div重叠?

链接到网页:http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_01/Lb1Labs.html

<div class="dropdown-content">
/*For each individual box.*/
.box{
  border: 1px solid black;
  min-width: 20%;
  margin: 0;
  background-color: #FFFFFF;
}

/*Creates the styling of the dropdown box.*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #62ff36;
  box-shadow: 0px 8px 16px 0px rgba(56,255,42,0.8);
  padding-top: 12px;
  z-index: 1;
}

.inside-box:hover .dropdown-content {
	display: block; 
}

fjxxq147 回答:如何在保持绝对位置的同时使子div适应父div宽度?

只需在您的width:100%类上添加一个dropdown-content,并在position:relative上添加一个box,以确保正是所选父级的宽度。

默认情况下,绝对元素将适合其内容。

本文链接:https://www.f2er.com/3169776.html

大家都在问