Question

我是HTML和CSS的新手。我已经开始创建自己的网站了，我遇到了一个问题，当我放大内容时div进入菜单div 。我似乎无法自己找到答案，所以如果你能帮助我的话会很棒。

HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
        <div class="logoBar">   
            <div class="helper">        
                <div class="logo"></div>
            </div>
        </div>
            <div id="vmenu"> 
                <ul> 
                  <li><a href="">Acceuil</a></li> 
                  <li><a href="">Identification</a></li> 
                  <li><a href="">Mon Parcours</a></li> 
                  <li><a href="">Ma Formation</a></li> 
                  <li><a href="">Mes Projets</a></li> 
                  <li><a href="">Dossier de Veille</a></li> 
                  <li><a href="">Contact Me</a></li> 
                </ul>   
            </div> 

            <div class="content">
            </div>
</body>
</html>

CSS：

/******************Custom Styles********************/
 @font-face
{
font-family: stainy;
src: url(../font/stainy.ttf);
}

body{
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

.logoBar{ 
    background:url(../img/LogoBar.png) ;
    height:149px;   
    position:relative;
    width: 100%; min-width: 960px;
}

.helper{
    height:120px;
    width:100%;
    display: table;
}

.logo{  
    background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;
}




div#vmenu { 
   margin: 0; 
   padding: .25em 0em .25em 0em; 
   /***border: solid 2px #30c9e0;***/   
   width: 13.5em; 
   float:left;


} 
div#vmenu ul { 
   margin: 0; 
   padding: 0; 
   list-style: none;


} 

div#vmenu ul li { 
   margin: 0; 
   padding: 0; 
   list-style: none; 
   color: #6F8083;
   font-family: stainy;
} 

div#vmenu ul a:link { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none; 
   font-size:23pt;   
   color: #6F8083;
   font-family:stainy;

   display: block; 

} 

div#vmenu ul a:active { 
   margin: 0; 
   padding: .25em .5em .25em .5em; 
   text-decoration: none; 
   color: black;
   font-family: stainy; 
   font-size:23pt;



} 

div#vmenu ul a:visited { 
   margin: 0; 
   color: #6F8083;
   font-family: stainy;
   text-decoration: none;  
   font-size:23pt;    
   color: #ffffff; 

} 

div#vmenu ul li a:hover { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none;  
   font-size:24pt;
   background-color: #30c9e0; 
   color: black; 

} 


.content{

  width: 700px ;
  height:100px;
  margin-top:20px;
  margin-left: auto ;
  margin-right: auto ;
  border: 1px solid #30c9e0;
  background-color:white;
  text-align:center;
  -moz-box-shadow: 0 0 3px 3px #4D4F50;
  -webkit-box-shadow: 0 0 3px 3px #4D4F50;
   box-shadow: 0 0 3px 3px #4D4F50;

}

Answer 1

要实现您所寻找的目标，而无需修改您创建的布局，您可以为min-width样式添加body。（对于你的布局，1150px应该这样做，但对于任何设备来说，这是一个非常不规则的最小宽度。仅供参考。）

Answer 2

你必须像这样维护divs％

div#vmenu { 
margin: 0; 
padding: .25em 0em .25em 0em;  
width: 20%; 
float:left;
background:#036;


}   
.contentWaper{ width:79%; float:left;}
.content{

width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:#000;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
 box-shadow: 0 0 3px 3px #4D4F50;

}

<div class="contentWaper"> <div class="content"> </div> </div>

Answer 3

你可以做的是添加一个div来包裹.content

并将margin-left: 14em提供给已包装的div

Here is the demo

当我放大时，Div代替另一个div

3 个答案: