如何防止调整窗口大小时图像移动

发布于 2024-11-18 11:31:20 字数 2579 浏览 2 评论 0原文

我目前正在开发此网站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;}

原文

Im currently developing this site http://digitalgenesis.com.au/projects/sister/music.html

What happens when i re-size screen is that it eventually collides with the div contents holding page title and then jumps down a line into the wrong position

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

What i'd like to do is have it stop just before it hits the text on the page

Can anyone offer suggestions on how to do this

Here is the 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>

And the css is

@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;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟雨扶苏 2024-11-25 11:31:21

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;
  }
}

a HTML5 solution would be to use media queries to style the page differently depending on width:

<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" />

in your base.css you would have all the common styling plus any styling for smaller screens. In your main.css you would have overrides for the larger screen.

(In other words you need to design your css with the small screen in mind first and then add css to make it look nice on larger screens.)

UPDATE:-

For example try:

@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;
  }
}

回复收藏 0 原文