1

現在このサイトを開発していますhttp://digitalgenesis.com.au/projects/sister/music.html

画面のサイズを変更すると、最終的にページタイトルを保持しているdivコンテンツと衝突し、1行下にジャンプして間違った位置

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 imagewithとして使うことbackground-position; top:0; right:0; no-repeatができ、あなたが与えることができるためにテキストが画像と重ならないようにしたいと言いましたmin-width

于 2011-07-05T04:04:22.130 に答える