Question

我正在尝试定位2 div和iframe。我希望第一个div和iframe水平放置，然后是第二个div。第二个div应该是可滚动的。我有以下似乎不起作用的HTML代码。所有元素都是水平浮动的，第二个div不可滚动。我能得到一些建议吗？谢谢！

https://fiddle.jshell.net/f9L4nny6/

＆＃13;

#wrapper div#input, iframe {
    float: left;
}
div#log{
    float:left;
}

＆＃13;

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

＆＃13;

Answer 1

您的日志div有一个ID，而不是一个类，因此您需要使用div.log而非clear:left来设置样式。一旦进行了更改，滚动条就会正确显示。

要将日志放在另外两个下面，您可以添加#wrapper div#input, iframe { float: left; } div#log { clear: left; float: left; overflow-y: scroll; height: 400px; }。

这是您的代码段的编辑版本，应该更接近您正在寻找的内容：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

#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>

Answer 3

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>

位置div，iframe和可滚动的div

3 个答案: