Fatal编程技术网
  • html/
  • Html 放大时展开父级的宽度，并为父级div滚动-x

Html 放大时展开父级的宽度，并为父级div滚动-x

html css

Html 放大时展开父级的宽度，并为父级div滚动-x,html,css,position,width,zooming,Html,Css,Position,Width,Zooming,我有一个父div和三个子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{

我有一个父div和三个子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:


内容。。
内容。。
这里是示例因为
div#child-div1.width（）+div#child-div2.width（）+div#child-div3.width（）>screen.width（）
，我减小了这些宽度，它工作正常。我建议您对父
DIV
使用
px
，对子
DIV
使用
%
。它总是有效的

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