我正在尝试制作一个50％-50％（下半部分）的网页，当用户将鼠标悬停在一侧时，它会扩展，反之亦然。
如果我每次将鼠标悬停在<div #container>上时，如何阻止<div #panel1>（“这是容器”）中的单词移动并向下推动#container {
background-color: yellow;
min-height: 100%;
box-sizing: border-box;
float: left;
min-width: 100%;
}
#panel1 {
background-color: red;
min-height: 100%;
box-sizing: border-box;
padding: 20px;
width: 50%;
float: right;
}
#panel2 {
background-color: blue;
min-height:100%;
box-sizing: border-box;
padding: 20px;
width: 100px;
height: 200px
}
#container:hover #panel1 {width:30%; transition: 0.5s;}
#container:hover #panel1:hover {width: 70%; transition: 0.5s;}？我试图将这些词放在panel1的“下方”。我的代码如下：
<div id="container">
This is the container (hover over me.). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac magna eget magna laoreet convallis ut et libero. "How do I prevent this paragraph from pushing down Panel 1 yet still be able to put words "under" the panel one?""....
<div id="panel1">This is panel one.(hover over me.)
<div id="panel2">This is panel two.</div>
</div>
</div>mkfifo mypipe
ls > mypipe