html - CSS:如何将 2 个 div(一个固定)彼此相邻放置，其中一个 div 全宽？

Question

我想制作一个网页，左侧有一个固定的 DIV1(导航)。

页面的其余部分应该填充比方说 DIV2。但在右侧，我想要一个仅在悬停时显示的 DIV3。当它出现时，DIV2 需要自动更改宽度以适应 DIV1 和 DIV3 以及发布时的宽度。 DIV2 需要重新填充页面。

(检查图片)

image

html:

   <div id="DIV1">
   <img class="logo" src="logo.png">
</div>

<div id="wrapper">
        <div id="DIV3">
        <div id="DIV4"></div>
        </div>

        <div id="DIV2">
        </div>
</div>

CSS:

#DIV1 {
position:absolute;
width:200px;
}

#wrapper {
position: absolute;
left: 200px;
right: 0px;
width: auto;
height: 700px;
background: red;
}

#DIV3 {
right:0px;
position: absolute;
width: 300px;
height: 700px;
background: yellow;
display: none;
z-index: 5;

}

#DIV2 {
min-width:500px;
margin-right:0px;
width: auto;
height: 600px;
background: pink;
}

    #DIV4 {
    width:50px;
    height:50px;

}

   #DIV4:hover #DIV3 {
   display:block;
}

任何帮助都会很棒。刚学 HTML 和 CSS，一点头绪都没有……

Answer 1

我用 display: table 和 display: table-cell 创建了一个简单的概念。

兼容性: display: table is compatible IE 8 +

• 右侧边栏隐藏为width: 0

• 使用 .middle:hover + .right

在中间列悬停时显示右侧边栏

• transition 提供了一个很好的滑入和滑出

• table-layout: fixed 允许 0 宽度

工作示例

将鼠标悬停在橙色列上以显示右侧边栏。

html,
body {
  height: 100%;
  margin: 0;
}
.wrap {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;      
}
.wrap > div {
  transition: width 0.8s;
}
.left {
  display: table-cell;
  width: 200px;
  background: #F00;
}
.middle {
  display: table-cell;
  background: #F90;
}
.right {
  background: #FF0;
  display: table-cell;
  width: 0;
}
.middle:hover + .right,
.right:hover {
  display: table-cell;
  background: #FF0;
  width: 300px;
}

<div class="wrap">
  <div class="left">

  </div>

  <div class="middle">
    Hover Me
  </div>

  <div class="right">

  </div>
</div>