浮动的Div在Outline-container下面

Question

我有一个关于div和float的问题。我已经搜索了很多，但似乎找不到任何可以解决我的问题/工作的东西。

我正在制作一个网站，并有两个内联div:一个描述和一个小时框。它们都设置在幻灯片显示div下，三个都设置在大纲/容器中。我试图让它适用于多种大小的窗口，但每当大纲div到达小时或描述div的底部时，它们似乎就会漂浮在外面。

我有点不擅长解释，所以你可以看一些代码：

div#outline{
clear: both;
height: 100%;
min-height: 100%;
width: 1000px;
margin: 0 auto;
background-color: white;
border: 5px solid white;
box-shadow: 0px 0px 17px #000000;
}

div#slideshow{
width: 50%;
min-width:700px;
height: 530px;
position: relative;
margin:0 auto;
margin-top: 30px;
}

#description{
width: 600px;
position: relative;
float: left;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}

#hours{
position: relative;
border: 5px solid green;
background-image: url("#");
height: 270px;
width: 220px;
box-shadow: 0px 0px 17px #000000;
float: left;
margin-right: 5px;
margin-top: 50px;
}

完整的内容可以在这里看到：http://jsfiddle.net/wfq0kg0L/

如有任何帮助，我们不胜感激！谢谢!

Answer 1

我不确定我是否理解了这个问题，但我认为它可能来自于从html标签往下使用height: 100%;。我根本不推荐这样做。这可能是非常烦人的。仅使用宽度或使用媒体查询设置适当的高度才能响应。

此外，您应该在outline div上使用overflow:hidden;，以不显示超出其边界的内容。

Answer 2

我不能理解你的problem..Looks就像me..All一切正常一样，我猜你是不是希望div#outline不会浮动在你的div容器之外？我没看到它漂浮在外面。

这里有一个快速的建议，tho..You不需要调用div#outline，只要#outline就行了。还有，为什么你要使用所有的div id？您可以为每个div创建一个类。即..。

HTML

<div class="outline">
   <div class="slideshow"></div>
 </div>

CSS

.slideshow{} 
.outline{}

这将清理你的css。

还可以研究一下flex-box。现在用这种方式做布局要容易得多，而且它在浏览器中得到了广泛的支持。不需要再漂浮了。

为什么你不使用一个简单的网格框架来帮助你做这类事情呢？

我在github上有一个资源库，你可以在那里了解flex-box。

看看这个。希望这能有所帮助:)

Answer 3

从高度中移除高度:100%或将其设置为最小高度:100%而不是height:100%

• After

1. “.outline”add