个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我目前正在开发这个网站 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;}
最佳答案
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;
}
}
关于css - 调整窗口大小时如何防止图像移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6577648/
25
4
0
我有一个应用程序，其中许多对象都扩展了一个抽象类，该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑，抽象类定义了默认
我正在使用$anchorScroll滚动到页面顶部，其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
我想停用我的应用程序中的右键单击，该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情？ 最佳答案 右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
我使用 jquery 定位 div，在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
所以，我正在尝试复制 html5“占位符”属性功能。 我目前坚持的一件事是，在获得元素焦点时，插入符号立即出现在输入的开头。 就目前情况而言，插入符号出现在用户单击的位置，然后当我使用 jQuery
当表单填写并发送时，如果您刷新页面，它表示表单将再次发送。 (再次提交表格)。 防止这种情况发生的好方法是什么？或者终止这个 session ？ 这方面有什么指导吗？ 谢谢 最佳答案 处理完POST信
我想阻止 @ 被输入到 input 中。但它不起作用，知道为什么吗？ $(function() { $(document).on('keyup', '[placeholder="x"]', fun
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误，我将如何“将查询分组在一起”，检查它是否会成功，然后对真实表进行实际影响。如果对表的实际更新失败，则恢复到更新之前的状
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例，我知道 eclipse 提供了一个反编译插件。而
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(
每当我编写需要大量条件的代码时，我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
我不确定术语是否正确，您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
我正在寻找一种简单的方法来检查多个零件表，以确定给定零件号在添加到给定表之前是否已经存在。 我目前想到的最好的想法是一个辅助表，它简单地将所有表中的每个 PN 列在一个列中，并带有一个唯一的键；但是我
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡，我会解释。 我有这个:
我有一个 Spring MVC web 应用程序(不确定该信息是否重要，但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。 字符串值的形式是: d@.
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗？我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么？我确实考虑过 bbcode，但发现如果没
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类)，它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
我正在使用 Polymer 1.5，我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。 有没有一种方法可以通过重写实例变量的 __set
我是一名优秀的程序员,十分优秀！