调整浏览器大小时元素会移动 [英] Elements move when browser is resized
本文介绍了调整浏览器大小时元素会移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
[HTML]如下：
< div class = 柱 > < div id =text-display>
< span id =targetElm>您的每日避孕药量< / span>
< / div>
< div class =morphing-tinting>
< a href =＃class =changeTextClass =targetElm |您的每日避孕药量>
display：inline-block;
background：url（http：/ / /www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg）no-repeat center center; width：250px; height：250px;>< / span>< /一个>
< a href =＃class =changeTextClass =targetElm |您的每日剂量对比>< span class =image-wrapstyle =position：relative ; left：0px; top：0; display：inline-block; background：url（无效的重复center center; width：250px; height：250px;>< / span>< / a>< / div>
< div class =cntratop>
< li class =live> < a target =_ blankhref =＃> CONTRABANG.TV< / a>< / li>
< li>< a target =_ blankhref =＃> MUSIC< / a>< / li>
< li>< a target =_ blankhref =＃> FASHION< / a>< / li>
< li>< a target =_ blankhref =＃>特色< / a>< / li>
< li>< a target =_ blankhref =＃> REVIEWS< / a>< / li>
< li>< a target =_ blankhref =＃> NEWS< / a>< / li>
< li>< a target =_ blankhref =＃> VIDEOS< / a>< / li>
< li>< a target =_ blankhref =＃> EVENTS< / a>< / li>
< / div>
这是[CSS]
.cntratop {
font-family：sans-serif;
font-size：12.5px;}
.cntratop ul {
list-style：none;
margin-left：auto;
margin-right：auto;
text-align：center;}
.cntratop li {
display：inline-block;}
.cntratop li：first-child {
margin-left：0px;}
/ * navbar text * /
.cntratop a {
display：inline;
padding：15px;
text-decoration：none;
颜色：＃888888;
cursor：pointer;}
.cntratop a：hover，
.cntratopli.live a {
font-weight：bold;
颜色：＃E94F78;
}
.column {
background：transparent;
width：960px;
margin-left：auto;
margin-right：auto;
text-align：center;
padding：0px;}
.srch {
background：transparent;
width：960px;
margin-top：5px;
margin-left：auto;
margin-right：auto;
text-align：center;
padding：0px;}
＃search-box {
list-style-type：none;
display：inline;
margin-left：0px;
margin-right：0px;
}
＃search-form {
background-color：transparent;
职位：亲属;
}
＃search-box input [type =text] {
width：400px;
font-family：格鲁吉亚;
font-style：italic;
font-size：90.0％;
padding：0px 2 2px 10px;
颜色：＃999;
outline：none;}
＃search-text {
font-size：13px;
font-family：格鲁吉亚;
font-style：italic;
border-width：0;
背景：透明;
}
#portfolio {
display：inline;
margin：auto;
text-align：center;
}
＃text-display
{top :;位置：相对;
display：inline-block;
padding：5px 10px;
font-family：sans-serif;
font-weight：bold;
font-size：50px;
颜色：白色;
text-align：center;
line-height：1.2em; margin：0px;
背景颜色：＃E94F78;
}
。morphing-tinting .image-wrap {
position：absolute;
-webkit-transition：1s;
-moz-transition：1s;
转换：1s;
-webkit-border-radius：30em;
-moz-border-radius：30em;
border-radius：30em;
}
。morphing-tinting .image-wrap：hover {
-webkit-border-radius：30em;
-moz-border-radius：30em;
border-radius：30em;
}
#socialNetworks {
float：right;
margin-top：110px;
margin-bottom：60px;
}
.twitterBtn {
float：left;
background-image：url（images / twitter.png）;
背景位置：左上角;
border：none;
display：block;
margin-left：15px;
width：24px;
height：22px;
}
.twitterBtn：hover {
background-position：bottom left;
}
.facebookBtn {
float：left;
background-image：url（images / fb.png）;
背景位置：左上角;
border：none;
display：block;
margin-left：15px;
width：24px;
height：22px;
}
.facebookBtn：hover {
background-position：bottom left;
}
#project {
margin-left：auto;
margin-right：auto;
padding：0px 0px 0px 0px;
height：200px;
width：310px;
display：inline;
overflow：hidden; //确保所有元素符合投资组合的技巧
}
.workEntry {
width：310px;
overflow：hidden;
float：left;
}
#thumbAttachment {
float：left;
width：310px;
height：200px;
overflow：hidden;
}
#inThumb {
margin-left：auto;
margin-right：auto;
}
#blackCross {
float：left;
width：310px;
height：200px;
margin-top：-200px;
khtml-opacity：0;
-moz-opacity：0;
-ms-filter：alpha（opacity = 0）;
filter：alpha（opacity = 0）;
opacity：0;
}
#blackCross：visited {
khtml-opacity：0;
-moz-opacity：0;
-ms-filter：alpha（opacity = 0）;
filter：alpha（opacity = 0）;
opacity：0;
}
#blackCross：hover {
khtml-opacity：1;
-moz-opacity：1;
-ms-filter：alpha（opacity = 100）;
filter：alpha（opacity = 100）;
不透明度：100;
}
#backToTop {
width：61px;
height：30px;
float：left;
margin-left：515px;
margin-top：-27px;
}
#allsharer {
float：right;
margin：17px 158px 0 0;
}
.twitter-share-button {
width：92px！important;
}
.fb-button {
position：relative;
top：2px;
解决方案
给包装一个 min-width ，并声明 max-width / width 。你会得到一个水平滚动条，但你的'元素'将保持原位。你的'元素'自然会随着视口的大小而流动，所以如果你缩小浏览器，'元素'应该随流动而移动。如果你声明视口是一定的大小，那么流程将会在新的大小范围内移动。
希望这有助于。
PS - IE7 / 8不喜欢最小宽度或最大宽度，所以你必须使用Modernizr或谷歌来进行CSS破解。
Every time I move the browser the elements move, I would like it to stay in same position. Does anybody have a solution? Thanks in advance for your help. The JSfidle is here: http://jsfiddle.net/cntra/E7Ydz/19/
The [HTML] is as follows:
<div class="column"> <div id="text-display">
<span id="targetElm">Your Daily Dose of Contrabang</span>
</div>
<div class="morphing-tinting">
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contrabang">
<span class="image-wrap" style="position:relative; left: 0px; top:0;
display:inline-block;
background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center;width: 250px; height: 250px;"></span></a>
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contraswag"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a>
<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contradads"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a></div>
<div class="cntratop">
<li class="live"> <a target="_blank" href="#">CONTRABANG.TV</a></li>
<li><a target="_blank" href="#">MUSIC</a></li>
<li><a target="_blank" href="#">FASHION</a></li>
<li><a target="_blank" href="#">FEATURES</a></li>
<li><a target="_blank" href="#">REVIEWS</a></li>
<li><a target="_blank" href="#">NEWS</a></li>
<li><a target="_blank" href="#">VIDEOS</a></li>
<li><a target="_blank" href="#">EVENTS</a></li>
</div>
This is the [CSS]
.cntratop{
font-family: sans-serif;
font-size: 12.5px;}
.cntratop ul{
list-style:none;
margin-left: auto ;
margin-right: auto ;
text-align: center;}
.cntratop li{
display:inline-block;}
.cntratop li:first-child{
margin-left:0px;}
/*navbar text*/
.cntratop a{
display:inline;
padding:15px;
text-decoration:none;
color:#888888;
cursor:pointer;}
.cntratop a:hover,
.cntratopli.live a{
font-weight:bold;
color:#E94F78;
}
.column{
background:transparent;
width: 960px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
padding: 0px;}
.srch{
background:transparent;
width: 960px;
margin-top: 5px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
padding: 0px;}
#search-box{
list-style-type: none;
display: inline;
margin-left: 0px;
margin-right:0px;
}
#search-form {
background-color: transparent;
position: relative;
}
#search-box input[type="text"] {
width: 400px;
font-family:Georgia;
font-style: italic;
font-size: 90.0%;
padding: 0px 2 2px 10px ;
color: #999;
outline: none;}
#search-text {
font-size: 13px;
font-family:Georgia;
font-style: italic;
border-width: 0;
background: transparent;
}
#portfolio{
display:inline;
margin: auto;
text-align: center;
}
#text-display
{top:; position: relative;
display:inline-block;
padding:5px 10px;
font-family:sans-serif;
font-weight:bold;
font-size:50px;
color: white;
text-align: center;
line-height: 1.2em;margin:0px;
background-color:#E94F78;
}
.morphing-tinting .image-wrap {
position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
#socialNetworks{
float:right;
margin-top: 110px;
margin-bottom:60px;
}
.twitterBtn{
float:left;
background-image:url(images/twitter.png);
background-position: top left;
border:none;
display:block;
margin-left:15px;
width:24px;
height:22px;
}
.twitterBtn:hover {
background-position: bottom left;
}
.facebookBtn{
float:left;
background-image:url(images/fb.png);
background-position: top left;
border:none;
display:block;
margin-left:15px;
width:24px;
height:22px;
}
.facebookBtn:hover {
background-position: bottom left;
}
#project{
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
height:200px;
width:310px;
display: inline;
overflow:hidden;//trick to ensure all elements fit in portfolio
}
.workEntry{
width:310px;
overflow:hidden;
float: left;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
margin-left: auto;
margin-right: auto;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}
#backToTop{
width:61px;
height:30px;
float:left;
margin-left:515px;
margin-top:-27px;
}
#allsharer{
float: right;
margin: 17px 158px 0 0;
}
.twitter-share-button {
width: 92px !important;
}
.fb-button {
position: relative;
top: 2px;
}
解决方案
Give your wrapper a min-width, and declare a max-width/width. You will get a horizontal scrollbar, but your 'elements' will stay in position. Your 'elements' naturally flow with the viewport size, so if you shrink the browser, the 'elements' are supposed to move with the flow. If you declare that the viewport is a certain size, then the flow will move within the new size.
Hope this helps.
P.S. - IE7/8 doesn't like min-width or max-width, so you will have to either use Modernizr, or Google for a CSS hack.
这篇关于调整浏览器大小时元素会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
