位置div，iframe和scrollable div
位置div，iframe和scrollable div
提问于 2016-07-15 13:00:28
我试图定位2 divs和一个iframe。我希望第一个div和iframe是水平定位的，然后是下面的第二个div。第二个div应该是可滚动的。下面的HTML代码似乎不起作用。所有元素都是水平浮动的，第二个div是不可滚动的。能给我一些建议吗？谢谢!
https://fiddle.jshell.net/f9L4nny6/
#wrapper div#input, iframe {
float: left;
}
div#log{
float:left;
}<body>
<div id="wrapper">
<div id="input">input form here
</div>
<iframe id="preview"></iframe>
</div>
<div id="log" style="overflow-y: scroll; height:400px; float:bottom">Log will be shown here</div>
</body>
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-07-15 13:06:56
您的日志div有一个id，而不是一个类，因此您需要使用div#log而不是div.log对它进行样式设置。一旦进行更改，滚动条将正确显示。
要将日志放在另外两个下面，可以添加clear:left。
下面是您的代码片段的编辑版本，应该更接近您要寻找的内容：
#wrapper div#input,
iframe {
float: left;
}
div#log {
clear: left;
float: left;
overflow-y: scroll;
height: 400px;
}<body>
<div id="wrapper">
<div id="input">input form here</div>
<iframe id="preview"></iframe>
</div>
<div id="log">Log will be shown here</div>
</body>
Stack Overflow用户
发布于 2016-07-15 13:07:42
#wrapper{
overflow: auto;
}
div#log{
float: none;
display: block;
}
#wrapper div#input, iframe {
float: left;
} <body>
<div id="wrapper">
<div id="input">input form here
</div>
<iframe id="preview"></iframe>
</div>
<div id="log" style="overflow-y: scroll; height:400px; float:bottom">Log will be shown here</div>
</body>
Stack Overflow用户
发布于 2016-07-15 13:12:49
float:bottom不存在。在float:left;clear:both上使用#log代替
见波洛
#wrapper div#input, iframe {
float: left;
}<body>
<div id="wrapper">
<div id="input">input form here
</div>
<iframe id="preview"></iframe>
</div>
<div id="log" style="overflow-y: scroll; height:400px; float:left;clear:both">Log will be shown here</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38396798
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号