Question

我有一个父div和3个孩子div。当放大浏览器时，我希望父div具有滚动x而子内容的位置仍然存在，现在发生的事情是当我放大浏览器时，child-div3移动到child-div2以下。下面我说明了css和html

body{padding: 0 5px;margin: 0;min-width: 1280px;overflow: auto;}
div#parent{min-width: 1280px;overflow-x:scroll;overflow-y:hidden;}
div#parent div{position: relative;}
div#child-div1{height:500px;width:480px;margin-top: 10px;float: left;}
div#child-div2{float:left; max-width: 600px;max-height: 500px;}
div#child-div3{height:500px;width:480px;margin-top: 10px;float: left;}

HTML：

<body>
    <div id="parent">
        <div id="child-div1">
            content..
        </div>
        <div id="child-div2">
            <img border="0" src="../images/images.png" alt="" width="600px" height="500px" />
        </div>
        <div id="child-div3">
            content..
        </div>
    </div>
<body>

此处包含示例code

Answer 1

因为div#child-div1.width()+div#child-div2.width()+div#child-div3.width()>screen.width()，我减少了这些宽度并且它正常工作。我建议您将px用于父DIV，将%用于子div。它总是有效

放大时展开父级的宽度，使用父级div的scroll-x

1 个答案: