HTML / CSS在缩小时会中断div

我正在为我父亲设计一个网站，到目前为止，我只是索引页面的中间。困扰我的是，当我缩小到大约 30%（只是为了测试）时，div 被破坏了，它们最终不合适（将向您展示一个例子）。此外，即使是div也不会作为一个"整体实体"停留

我基本上尝试了所有方法，最小宽度（965px）。有没有办法让它四舍五入百分比明智？如果是这样，考虑到最大宽度必须为 965px，如何制作？

我的网站主要适用于PC。

我也在使用HTML5和CSS3

有一个外部div，将整个身体放入一个"盒子"中

警告：我的页眉在 PHP 中，页脚也是如此，然后我只是加载它们。我将同时发布标题.php和一般背景 CSS

CSS代码是这样的：

@charset "utf-8";
/* CSS Document */
body
{
    background:url(pics/bg.jpg) no-repeat center center fixed;
    background-color:#282828;
    font-family: 'Sancreek', cursive;
    min-width:965px;
    margin: 0 auto;
}
.bodyoutline
{
    min-width:100%  ;
}
div.upperbody
{
    background:url('pics/topbg.png') no-repeat center center;
    width:965px;
    height:100px;
    margin: 0 auto;
}
div.body
{
    background:url('pics/divbg.png') no-repeat center center fixed;
    width:965px;
    height:1304px;
    margin: 0 auto;
    margin-top:-25px;
    }
div.header
{
    background:url('pics/header.png');  
    width:965px;
    margin: 0 auto;
    height: 319px;
    overflow:hidden;    
}
div.logo
{
    background:url('pics/logo.png');
    width: 220px;
    height: 215px;
    float:left;
    margin-left:20px;
    margin-top:20px;    
}
div.groupPhoto
{
    background:url('pics/group.png');
    float:right;
    margin-right:30px;
    width:552px;
    height:244px;
    margin-top:30px;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Safari and Chrome */
}
div.mainContent
{
    width:965px;
    margin: 0 auto;
    float:left;
}
div.menuLinks
{
    width:965px;
    margin: 0 auto;
    text-align:center;
}

ul,li.menuLinks
{
    width:965px;
    margin: 0 auto;
    display:inline;
    font-size: 38px;    
    padding: 10px;
    color: #39100a;
    font-weight:bold;
}
div.separator
{
    width:965px;
    text-align:center;
    margin:0 auto;
    height:50px;
}
div.box
{
    width:965px;
    margin: 0 auto;
}
div.updec
{
    background:url('pics/updec.png') center no-repeat;
    width: 965px;
    height: 202px;
}
h1.titles
{
    margin-left:75px;
    font-size:30px;
}
h1.ePhotos
{
    float:left;
    font-size:18px;
    text-decoration:underline;
    margin-left:25px;
}
.position
{
    margin-left:90px;
    margin-top:-130px;
}
a:visited
{
    text-decoration:none;
    color:#000; 
}
a:hover
{
    text-outline:#000;
    outline-color:#000;
    outline-width:2px;
    margin: 0 auto;
}

标头.php

<!DOCTYPE>
<html>
<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">  
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>

</head>
<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">
    <div class="header"> <!-- Header containing Logo and Group Photo -->
        <div class="logo"></div> <!-- Logo -->
        <div class="groupPhoto"></div> <!-- end of groupPhoto -->
    </div> <!--End of header -->
    <div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->
        <div class="menuLinks"> <!-- Menu Links -->
            <ul class="menuLinks">
                <li class="menuLinks"><a href="index.php">Home</a></li>
                <li class="menuLinks"><a href="about.php">About</a></li>
                <li class="menuLinks"><a href="dances.php">Dances</a></li>
                <li class="menuLinks"><a href="videos.php"> Videos </a></li>
                <li class="menuLinks"><a href="events.php">Events </a></li>
                <li class="menuLinks"><a href="contact.php">Contact</a></li>
             </ul>
         </div> <!-- end of mainContent -->

缩小到 30% 的结果

http://imageshack.us/photo/my-images/571/y1bw.jpg/

PS：浏览器

当前测试和使用的是谷歌浏览器：版本29.0.1547.66 m

谢谢

最佳做法是

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

这将使您的所有元素都在div 中，并且无论放大或缩小如何，都始终对齐。

我发现最好的人是使用媒体查询

通过简单地添加

@media (max-width: 600px)
{
  //All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
  font-size:20px;
}
}

当屏幕为600px或更小（或缩小）时，h1的字体大小将更改为20px，而所有其他CSS将保持原始写入（因为它是父级）

换句话说：

媒体查询将

仅影响在媒体查询之间写入的那些类（将覆盖原始查询）

相关内容

最新更新

热门标签：