Question

我正在开发一个响应式网站，并遇到了一个菜单文本的小问题。我想要它做的是坚持其div的右边缘，同时缩小宽度。当宽度低于1000px时，div和文本所在的容器与站点一起缩放。不幸的是，我似乎无法找到一个像样的css命令来实现这一目标。我的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Żaglówki!</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

      <!--

          COLOR SHEME:
            000c14
            008ee8
            0aa1ff
            5fb2e8
            6fc7ff  -->



  </head>
  <body>
      <div id="container">
      <div class="hpanel"></div>
      <div id="MainPhotoMenu" style="background-image: url(image/bg1.jpg);">
          <h1 id="name">SUPER ŻAGLÓWKI!!</h1>
          <ul>
          <li><a href="#" class="menulink">O Nas</a></li>
           <li><a href="#" class="menulink">Eventy</a></li>
              </ul>
          </div>
      <div class="hpanel"></div>



      </div>










    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

和CSS：

body{font-family: 'Droid Serif', serif;}

#container{
width: 1000px;
height: 1300px;
margin: auto;
   box-shadow: 4px 4px 20px #9b9b9b;
    background-color: #5fb2e8;
}

#container:before{
background-image: url(image/ELM2.jpg);
    display:block;
position: absolute;
    width:100%;
    height:100%;
    z-index:-1;
}

.hpanel{
    display:block;
     width: 100%;
    height: 20px;
    background-color: #0aa1ff;
    box-shadow: 5px 1px 9px #9b9b9b;
}

#MainPhotoMenu{
    position:relative;
width:100%;
height:220px;
background-position: bottom;
background-attachment: fixed;
    background-size: cover;
    box-shadow: inset 1px 1px 120px;
     background-repeat: no-repeat;
    text-align: right;
}

#name{
color:#52a3d9;
    position:absolute;
    top: 145px;
    font-size: 60px;
    text-shadow: 1px 1px 10px #000c14;

}

.menulink{
color:white;
position:relative;
top: 50px;
left: 30px;
font-size: 40px;
    text-shadow: 1px 1px 15px #000c14;
    vertical-align: middle; 


}




@media only screen and (max-width: 1000px) {
    #body {
        width: 100%;
    }
}

@media only screen and (max-width: 580px) {
    #name {
        top:175px;
        font-size:2em;
    }
}

div {
  @include box-sizing(border-box);
}

将不胜感激任何帮助

Answer 1

解决方案1：

为什么不将“容器”宽度更改为100％如果你需要div在分辨率小于1000px时的响应

@media only screen and (max-width: 1000px) {
#body {
    width: 100%;
}#container{width:100%}

}

解决方案2：

您需要将“容器”宽度更改为最大宽度

#container{max-width: 1000px;height: 1300px;margin: auto;box-shadow: 4px 4px 20px #9b9b9b;background-color: #5fb2e8;

}

使文本粘贴到div的右边缘

1 个答案: