当宽度根据用户屏幕大小改变时,如何将div的高度设置为宽度的一半？
我在div上有以下内容......
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:400px;
background-color:red;
}
宽度可以正常工作,如果屏幕太窄则锁定为400像素,如果屏幕太大,它也会停止以1200像素扩展.但是,我也希望高度可以改变为任何给定时间宽度的一半.就像是...
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:width/2;
background-color:red;
}
这没有奏效(我并没有真正期待它).
如果可能的话,我更喜欢使用CSS,但是如果用户也手动调整互联网窗口的大小(就像目前的宽度那样),我也希望改变高度.我不确定CSS是否可行,但是,如果有一种方法可以通过Jquery实现这一点,我也很乐意使用它.
谁能帮我？
我正在寻找一种方法可以创建一个div,它将垂直固定在页面上,因此如果用户向下滚动,div将保持在页面上的相同位置.但是它的位置绝对水平,所以如果用户屏幕比我的网页更窄,向右或向左滚动不会导致div随屏幕移动,在某些情况下,在屏幕边缘保持半可见或完全关闭页面.
此div必须位于"位置:相对"Div内.
我很确定没有办法为div的变化轴分配不同的位置,但这是描述我希望实现的效果的最佳方式.
到目前为止我有这个,这基本上只是一个相对分区内的固定分区.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
我还创建了一个jsFiddle来帮助演示这个问题.
这适用于垂直方向,但是如果您调整Web浏览器的大小以使其比黄色框(容器)更窄,然后水平滚动,则蓝色框将随页面移动.我希望阻止这种情况发生.
如果没有办法通过CSS实现这一点,我很高兴使用JavaScript,只要它适用于所有现代浏览器以及IE7和IE8.(这就是为什么我添加了JavaScript标记)
谁能帮我吗？
我目前有一个带有几个文本规则集的div标签,p,h1,h2 ......等等.
我想知道无论如何我可以做到这样,如果文本对于div的宽度变得太长而这些规则中的一个不会进入下一行,而是从div中运行的文本没有被显示在浏览器中？
所以,例如,我的p标签是正常的,如果文本行太长,它将简单地溢出到下一行,与我的h1和h2相同,但我希望我的h3只占用一行而从不占用多个,即使这意味着一些文本在div的边缘被切断.
HTML
<div id="box">
<h1>This is the first header and this will overflow onto the next line when it gets too long.</h1>
<h2>This is the second header and this will overflow onto the next line when it gets too long..</h2>
<p>This is the paragraph and this will overflow onto the next line when it gets too long.</p>
<h3>This is the third header and I do not want this to overflow when it gets too long... But it …我目前正在尝试创建松散堆叠的宝丽来照片形式的按钮,我想得到用户将鼠标悬挂在堆顶上的偏光片.
我试图用一个简单的方法实现这个目的:
#polaroid a hover{
z-index:15;
}
我认为这理论上可以将宝丽来带到堆顶,因为目前"最高"的宝丽来是z指数:13;
但是,这根本不起作用,我想我做错了,可能需要一些javascript来实现这一点.
我目前的代码是......
HTML
<a id="polaroid_home" href="index.html"></a>
<a id="polaroid_about" href="index.html"></a>
<a id="polaroid_portfolio" href="index.html"></a>
<a id="polaroid_contact" href="index.html"></a>
我已将所有这些设置为链接到index.html以进行测试.
CSS
#polaroid_home{
position:absolute;
width:175px;
height:215px;
left:670px;
top:140px;
background-image:url(../Images/polaroid-home.png);
background-repeat:no-repeat;
z-index:13;
}
#polaroid_home a:hover{
z-index:15;
}
#polaroid_about{
position:absolute;
width:175px;
height:215px;
left:765px;
top:175px;
background-image:url(../Images/polaroid-about.png);
background-repeat:no-repeat;
z-index:12;
}
#polaroid_about a:hover{
z-index:15;
}
#polaroid_portfolio{
position:absolute;
width:175px;
height:215px;
left:620px;
top:255px;
background-image:url(../Images/polaroid-portfolio.png);
background-repeat:no-repeat;
z-index:10;
}
#polaroid_portfolio a:hover{
z-index:15;
}
#polaroid_contact{
position:absolute;
width:210px;
height:235px;
left:740px;
top:310px;
background-image:url(../Images/polaroid-contact.png);
background-repeat:no-repeat;
z-index:11;
}
#polaroid_contact a:hover{
z-index:15; …我目前正试图找到一种方法来锁定我的标题在屏幕上的大部分已经滚动到顶部.
所以,例如,如果我的标题是150像素高,那么无论如何我可以锁定屏幕顶部的底部15像素,当用户向下滚动页面时顶部135像素从顶部滚动？因此,无论我的页面变长多久,我的标题顶部总会有最下面的15个像素.
当用户向上滚动时,我还需要反转它,以便标题可以返回到它的原始状态.
我已经尝试了一个肮脏的工作,其中另一个标题高15像素,在我的原始标题后面分层的"固定"位置,这样当完整的150像素原始屏幕离开屏幕时,我的新标题从它后面出现.这确实有效,但如果用户在中间点捕获它,它看起来很可耻.
我对JavaScript的了解非常有限,而且可能是我的答案所在.
我目前正在尝试创建一个按钮，该按钮会将用户带回到页面顶部，但具有动画效果。单击该按钮时，使页面滚动回到顶部。我在这里搜索，发现了这个 ..
我尝试使用以下方法对此做一个JSfiddle ...
的CSS
html {
margin:0;
padding:0;
height:2000px;
}
body {
height:2000px;
}
#blue-box {
position:fixed;
width:100px;
height:70px;
margin-left:0px;
margin-top:50px;
background-color:blue;
}
#blue-box h1{
font-family:Constantia;
font-size:20px;
text-align:center;
margin-top:5px;
color:#FFFFFF;
}
的HTML
<div id="blue-box">
<h1>Back To Top</h1>
</div>
的JavaScript
$(document).ready(function() {
var away = false;
$('#blue-box').click(function() {
$("html, body").animate({scrollTop: 0}, 500);
});
不幸的是，这似乎不起作用，我想知道我是否错过了某些事情或做错了明显的事情？