Question

这是我的html模板的结构，它在大屏幕（电脑的显示器）上显示我的网页时工作正常，但在较小的屏幕（电话屏幕）上显示不是这样，最右边的列显示在页面的底部而不是右边，我需要的是，不是将列移动到页面的底部，我可以让页面进行水平滚动吗？并且最右边的div永远不会被推到底部？

<div>
   <div style="float:left;">
   </div>
   <div style="float:left;">
   <pre>  </pre>
   <!--Just to create space-->
   </div>
   <div style="float:left;">
   </div>
</div>
<div style="clear:left"></div>

Answer 1

嗯，这就是当你使用浮动而不是设置父元素的宽度时会发生什么。您可以设置父元素的最小宽度（或只是宽度应该很好）或使用％的div大小，和/或使用display：table;，而不是float。这是一个例子：http://jsfiddle.net/c995v/`

<body>
    <div id="parent">
        <div style="float:left;">first float left</div>
        <div style="float:left;"> <pre> second float left </pre>

            <!--Just to create space-->
        </div>
        <div style="float:left;">third float left</div>
    </div>
    <div style="clear:left"></div>
</body>

divs最右边的列在小屏幕上向下推

1 个答案: