Question

我有关于div和浮点数的问题。我搜索了很多，但似乎找不到任何可以解决我的问题/工作的事情。

我正在制作一个网站，并有两个内联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%;。我根本不建议这样做。这可能非常烦人。仅使用宽度或使用媒体查询来响应以设置适当的高度。

此外，您应该在大纲div上使用overflow:hidden;来不显示其边界之外的内容。

Answer 2

我不理解你的问题。看起来一切都对我很好。我可以猜到，你希望div#outline 不漂浮在外面你的一个div容器？我没有看到它漂浮在外面。

这里有一个快速推荐。你不需要打电话div#outline只需#outline即可。另外，为什么你要使用所有div个ID？你可以每个div一个班级。 IE ..

<强> HTML

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

<强> CSS

.slideshow{} 
.outline{}

这会清理你的CSS。

同时查看flex-box。现在以这种方式进行布局要容易得多，并且它在浏览器中得到了广泛的支持。不再需要漂浮了。

为什么你没有使用简单的网格框架来帮助你解决这类问题。

我在github上有一个回购，你可以在那里了解flex-box。

检查出来。希望这有帮助:)

Answer 3

从.outline移除高度：100％或使其达到最小高度：100％而不是高度：100％
div id =＆＃34; hours＆＃34;添加

Floated Div出现在Outline-container下面

3 个答案: