1

我目前正在开发这个网站http://digitalgenesis.com.au/projects/sister/music.html

当我重新调整屏幕大小时会发生什么，它最终与包含页面标题的 div 内容发生冲突，然后跳下一行进入错误的位置

http://digitalgenesis.com.au/projects/sister/img/screen.png


我想做的是让它在它碰到页面上的文本之前停止


谁能提供有关如何执行此操作的建议


这是html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
       <title></title>
</head>

<body>
<div id="wrap">


<div id="musicbox">
<div id="musicheader">Music</div>

<div id="musicline"></div>
<div id="musiccontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>


</div>

<div id="musicimg"><img src="img/katrina.jpg" alt="#" /></div>



</body>
</html>




而CSS是

@font-face {
    font-family: 'CodeLightRegular';
    src: url('../fonts/code/code_light_copy-webfont.eot');
    src: url('../fonts/code/code_light_copy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/code/code_light_copy-webfont.woff') format('woff'),
         url('../fonts/code/code_light_copy-webfont.ttf') format('truetype'),
         url('../fonts/code/code_light_copy-webfont.svg#CodeLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#wrap{width:960px; margin:0 auto;}



#musicheader{font-size:120px; font-family: 'CodeLightRegular'; }
#musicbox{float:left; width:519px; }
#musicline{height:4px; background:black;  }
#musicimg{float:right; width:441px; }
#musiccontent{width:120%;}

#clear{clear:both;}
4

2 回答 2

0

HTML5 解决方案是使用媒体查询根据宽度对页面进行不同的样式设置：

<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="css/main.css" />

在您的系统中，base.css您将拥有所有常见的样式以及任何适用于小屏幕的样式。在您的main.css情况下，您将覆盖更大的屏幕。

（换句话说，您需要先考虑小屏幕设计 css，然后添加 css 以使其在大屏幕上看起来不错。）

更新：-

例如尝试：

@media screen
{
  body{
      background-size: 0;
  }
}
@media screen and (min-width: 645px)
{
  body{
      background-size: 20%;
  }
}
@media screen and (min-width: 960px)
{
  body{
      background-size: auto;
  }
}
于 2011-07-05T04:00:02.103 回答
0

正如丹所说，您可以将其用作background imagewithbackground-position; top:0; right:0; no-repeat并表示您希望文本不与您可以提供的图像重叠min-width

于 2011-07-05T04:04:22.130 回答