Question

我想在左侧制作一个固定的DIV1（导航）的网页。

页面的其余部分应该填充让我们说DIV2。但是在右侧我希望有一个仅在悬停时显示的DIV3。当它出现时，DIV2需要自动改变宽度以适应DIV1和DIV3之间以及释放。 DIV2需要再次填充页面。

（查看图片）

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为compatible IE 8 +

右侧边栏隐藏了width: 0
右侧边栏显示在中间栏上，悬停在.middle:hover + .right
transition提供了一个很好的幻灯片进出
table-layout: fixed允许0宽

工作示例

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

＆＃13;

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;
}

＆＃13;

<div class="wrap">
  <div class="left">

  </div>

  <div class="middle">
    Hover Me
  </div>

  <div class="right">

  </div>
</div>

＆＃13;

Answer 2

这可能对你有用，但这不是理想的做法。但这在很大程度上取决于你正在建设什么。在此示例中，＃DIV3显示在右侧（10px），其余部分由视口隐藏。当悬停那个黄色条时，＃DIV3滑出，而＃DIV2宽度收缩（可选）。

#DIV1 {
position:fixed;
width:200px;
  background: green;
  height: 700px;
}

#wrapper {
position: absolute;
left: 200px;
right: 0px;
width: auto;
height: 700px;
background: red;
}

#DIV3 {
right:-290px;
position: absolute;
width: 290px;
height: 700px;
background: yellow;
z-index: 5;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
padding-left: 10px;
}

#DIV2 {
margin-right:10px;
height: 600px;
background: pink;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
}

    #DIV4 {
    width:50px;
    height:50px;
    background: blue;

}

   #DIV3:hover {
   right: 0px;
}
#DIV3:hover + #DIV2 {
  margin-right: 300px;
}

<div id="DIV1">
   This is #DIV1, static and might be the menu.
</div>

<div id="wrapper">
        <div id="DIV3">This is the sidebar #DIV3.
        <div id="DIV4">This is #DIV4, no special behaviour right now.</div>
        </div>

        <div id="DIV2"><p>Here is some example text to show how it breaks when hovering #DIV3. (NOTE: I removed the min-width for demonstration purposes. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
</div>

CSS：如何将2个div（一个固定）彼此相邻放置一个div全宽？

2 个答案:

工作示例