html - 当按下放大 css 时，我的部门正在移动

Question

我已经创建了一个设计，但是当我放大或缩小时，分区在移动

这是我的CSS:

.date {
    color: #CCCCCC;
    font-family: georgia;
    font-size: 14px;
    font-style: italic;
    margin-left:67px;
}
.blank {
    background:#CCCCCC;
    width:100%;
    height:5px;
}
}
.menu {
}
.menu_item {
    margin:20 5;
    list-style:none;
    float:left;
}
.menu_item li {
    display:inline;
    margin:10px;
}
.menu_item li a {
    text-decoration:none;
    color:#ffffff;
    font-size:14px;
    font-family:Arial;
}
.menu_item li a:hover {
    color:#999999;
}
.sitelogo:hover h1 {
    color:#999999;
}
.sitelogo {
    text-decoration:none;
}
.menu_item_right li {
    display:inline;
    /*margin:10px;*/
    color:#ffffff;
    font-size:14px;
    font-family:Arial;
}
.menu_item_right li img:hover {
    opacity:1;
}
.menu_item_right li img {
    opacity:.5;
}
.menu_item_right li a {
    text-decoration:none;
    color:#ffffff;
    font-size:14px;
    font:bold;
}
.menu_item_right li a:hover {
    color:#999999;
}
h1 {
    margin:5px 0 0 0;
    color:#ffffff;
    font-size:28px;
    font-family:'PT Sans', sans-serif;
}
h3 {
    margin:10px 10px 10px 70px;
    color:#333333;
    font-size:15px;
    font-family: Arial;
}
.italic_text {
    margin-left:9px;
    float:left;
    color: #CCCCCC;
    font-family: georgia;
    font-size: 14px;
    font-style: italic;
}
.newscontent a {
    margin-left:68px;
    float:left;
    font-family:Arial;
    color:#3399cc;
    font-size:12px;
    text-decoration:none;
}
.newsmaincontent1 a {
    margin-left:10px!important;
    font-family:Arial;
    color:#3399cc;
    font-size:12px;
    text-decoration:none;
}
.newsmaincontent {
    float:left;
    font-family:Arial;
    color:#666666;
    font-size:12px;
    margin:15px 15px 28px 68px;
}
.italic_text1 {
    margin-left:10px;
    float:left;
    color: #CCCCCC;
    font-family: georgia;
    font-size: 14px;
    font-style: italic;
}
.newscontent1 h3 {
    margin:10px;
    color:#333333;
    font-size:15px;
    font-family: Arial;
}
h2 {
    margin:10px 10px 0px 0px;
    color:#333333;
    font-size:18px;
    font-family:'PT Sans', sans-serif;
}
.newscontent1 a {
    margin-left:10px;
    float:left;
    font-family:Arial;
    color:#3399cc;
    font-size:12px;
    text-decoration:none;
}
.newsmaincontent1 {
    float:left;
    font-family:Arial;
    color:#666666;
    font-size:12px;
    margin:15px 15px 28px 10px;
}
.site-title {
    margin:0 0;
    color:#dcf1ff;
    float:left;
    margin-left:10%;
}
.site_text {
    font-size:12px;
    font-family:Arial;
    color:#dcf1ff;
}
.menu_item_right {
    list-style:none;
    float:right;
    margin-right:10%;
}
.footer {
    width:100%;
    padding-top:2%;
    margin-top:2%;
    height:200px;
    background:#eaeaf7;
}
.footer_menu {
    text-align:center;
    list-style:none;
    display:inline;
    margin-left:31%;
    margin-top:10%;
}
.footer_menu_lower {
    color:#999999;
    text-align:center;
    width:38%;
    margin-left:32%
}
.footer_menu li {
    display:inline;
    margin:5px;
    font:Arial;
    font-size:15px;
    color:#999999;
}
.footer_menu li a {
    text-decoration:none;
    color:#3399cc;
}
.header {
    width:100%;
    height:60px;
    background-color:#69bef6;
    border-bottom:5px;
    color:#e6e6f3;
}
.wrap {
    margin-left:10%;
    margin-right:10%;
    width:80%;
}
.leftContent {
    width:32%;
    float:left;
    background:#f2f2f9;
    /*overflow:hidden;*/
}
.leftcontent1 {
    width:100%;
    /*padding:10px 10px 10px 10px;
    */
    float:left;
    background:#FFFFFF;
    margin-top:2%;
    /*margin:10px*/
    ;
}
.imgbtn {
    width:60px;
    height:36px;
    background-image:url(../images/dateBg.png);
    margin-top:3%;
    float:left;
}
.leftcontentgraph {
    width:100%;
    float:left;
    background:#FFFFFF;
    height:200px;
}
.rightContent {
    width:65%;
    float:right;
}
.leftcontentgraphborder {
    background:#A8CA5C;
    width:100%;
    height:5px;
}
.rightcontentupperborderblog {
    background:#A8CA5C;
    width:100%;
    height:5px;
}
.rightcontentupperborder {
    background:#5DBCD2;
    width:100%;
    height:5px;
}
.rightcontentlowerborderblog {
    background:#A8CA5C;
    width:100%;
    height:5px;
}
.rightcontentlowerpartleft1border {
    background:#5DBCD2;
    width:100%;
    height:5px;
}
.rightcontentlowerpartright1border {
    background:#5DBCD2;
    width:100%;
    height:5px;
}
.rightcontentlowerpartright1border1 {
    background:#A8CA5C;
    width:100%;
    height:5px;
}
.rightcontentlowerpartright1border3 {
    background:#5DBCD2;
    width:100%;
    height:5px;
}
.rightcontentupperpart {
    width:100%;
    float:left;
    background:#FFFFFF;
    height:300px;
}
.rightcontentlowerpart {
    width:100%;
    float:left;
    /*background:#f2f2f9;*/
}
.clear {
    clear:both;
}
.rightcontentlowerpartleft {
    width:49%;
    float:left;
}
.rightcontentlowerpartright {
    width:49%;
    float:right;
}
.rightcontentlowerpartleft1 {
    width:100%;
    float:left;
    background:#FFFFFF;
    margin-top:2%;
    /*margin:10px*/
    ;
}
.rightcontentlowerpartright1 {
    width:100%;
    float:left;
    background:#FFFFFF;
    margin-top:2%;
    /*margin:10px*/
    ;
}
}
/* for blog*/
 .blogpage {
    width:100%;
}
.leftcontentgraphborderblog {
    background:#5DBCD2;
    width:100%;
    height:5px;
}
.leftContentblog {
    width:756px;
    float:left;
}
.rightContentblog {
    width:300px;
    float:right;
}
.rightcontentupperpartblog {
    width:100%;
    float:left;
    background:#FFFFFF;
    height:300px;
}
.rightcontentlowerpartblog {
    width:100%;
    float:left;
    background:#000000;
}
.rightcontentlowerpartblogcontent {
    width:100%;
    background:#FFFFFF;
}

这是html

<body  bgcolor="#f2f2f9" style="margin:0 auto;overflow:scroll">
    <div style="margin:0 auto; "  ><!-- main div start-->
                <!--header start-->
        <div class="header"><!--  div header start-->

            <div class="menu"><!-- div  menu start-->
                <a class="sitelogo" href="#">
                    <div class="site-title"><!--  div site-tittle start-->
                        <h1>
                            BIG DATA
                        </h1>
                        <span class="site_text"> <!--  div site text start-->
                            Powered by PureAnalyzer
                        </span>                 <!--div site text close-->
                    </div>        <!-- div site tittle close -->

                </a>

                <ul class="menu_item">
                      <li>
                        <a href="#"><b>HOME</b></a>
                    </li>
                    <li>
                        <a href="#"><b>NEWS</b></a>
                    </li>
                    <li>
                        <a href="#"><b>CAREERS</b></a>
                    </li>
                    <li>
                        <a href="#"><b>BLOG</b></a>
                    </li>
                </ul>

                <ul class="menu_item_right">

                      <li>
                        <a href="#"><b>SUBSCRIBE FOR ALERTS</b></a>
                    </li>
                    <li>
                            <a href="#"><img class="icon_image" src="images/facebook.png" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/twitter.png" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/googlePlus.png" /></a>
                    </li>
                    <li>
                        <a href="#"><b>LOGIN</b></a>
                    </li>
                </ul>        
            </div>

        </div>
                <!--header ends-->
        <div class="clear"></div>
                <!--page body start-->
        <div class="wrap">
        <div class="blogpage">
                    <!--left part start-->        
            <div class="leftContentblog" >
                <H2>Blog</H2>
                <div class="leftcontentgraph">
                    <div class="leftcontentgraphborderblog"></div>
                </div>
                <div class="clear"></div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,                             when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                   </div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,                                                                                             when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                </div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,                             when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                </div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,                             when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                </div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,     when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                </div>
                <div class="leftcontent1">
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
                        <div class="date">5Jan,2013</div>
                        <div class="newsmaincontent">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,         when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>
                </div>
            </div>
                    <!--left part ends-->
                    <!--right part start-->
            <div class="rightContentblog">
                <h2>CATEGORY</h2>
                <div class="clear"></div>
                <div  class="rightcontentupperpartblog">
                    <div class="rightcontentupperborderblog"></div>
                    <div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>    
                        <div class="newsmaincontent">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        </div>
                    </div>

                </div>

                <div class="clear"></div>

                <h2>ARCHIVE</h2>

                <div class="clear"></div>

                <div class="rightcontentlowerpartblog">
                    <div class="clear"></div>
                    <div class="rightcontentlowerpartblogcontent">
                        <div class="rightcontentlowerborderblog">
                        </div>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    </div>
                </div>    
            </div>
                    <!--right part ends-->
        </div>
        </div>                    
                <!--page body ends-->
        <div class="clear"></div>
                <!--footer start-->
         <div class="footer">

         </div>
                <!--footer ends-->     
    </div>
                <!-- main div ends-->
</body>

当我按下放大时，所有的 div 都留在原地，当我按下缩小时，这个问题也出现了

Answer 1

你应该给 .blogpage 元素一个 min-width 因为它包含固定宽度的元素..

所以应该是子元素之和

.blogpage{min-width:1056px;}

演示在 http://jsfiddle.net/gaby/pxLyq/1/