如何防止瀏覽器調整大小時移動HTML元素？

我正在創建一個HTML頁面，但我遇到一個很大的問題：調整瀏覽器大小。調整瀏覽器大小時，我網頁上的元素將從您的位置移開。我的HTML代碼是下一個：如何防止瀏覽器調整大小時移動HTML元素？

<body> 
<div class="wrap"> 
    <div class="header"> 
     <form class="form"> 
      <label>E-mail </label><input > 
      <label>Password </label><input > 
     </form> 
    </div> 
</div>

我的CSS代碼是下一個：

.wrap{width:100%;} 
.header{background-color:#046b5b; width: 100%; height: 5em;} 
.form{position:relative; top:50%; float: right;}

我該怎麼辦？

來源

2014-07-12 JuanGD

你試過絕對定位？或者玩溢出設置？ –

是的桑迪，但不起作用。流程相同。 – JuanGD

因此，在所有的現實中，你不希望你的網頁有反應？你只是希望它在某個時候停止重新調整自己？ – BuddhistBeast

我想在一個快速的不同的方式來解決這個問題增加，同時也使您的網站仍然響應。下面是代碼：

HTML

<div class="wrap"> 
    <div class="header"> 
     <form class="form"> 
      <label class="entry"> <span>E-mail</span> 
       <input placeholder="Email Address" /> 
      </label> 
      <label class="entry"> <span>Password</span> 

       <input placeholder="Password" /> 
      </label> 
     </form> 
    </div> 
</div>

CSS

.wrap { 
    width:100%; 
} 
.header { 
    background-color:#046b5b; 
    width: 100%; 
    height: 5em; 
    min-width: 200px; 
} 
.form { 
    position:relative; 
    display:inline-block; 
    top:50%; 
    float: right; 
} 
.entry { 
    display:inline-block; 
} 

@media screen and (max-width: 460px) { 
    span { 
     display:none; 
    } 
    form { 
     text-align:center; 
     margin: 0 auto; 
    } 
    .header { 
     height:7em; 
    } 
}

結論

我在你的HTML改變了一些東西，因爲你可以看到，但它根本不是微不足道的。我爲瀏覽器變小時添加了一個佔位符，用戶仍然確切地知道要在輸入字段中放置什麼內容，而不需要那裏的標籤來將輸入對齊。

我添加了一個CSS媒體查詢來檢查屏幕大小何時達到某個點，在這個例子中，我只是用了460px，但你隨時可以隨心所欲地調整它。基本上，如果用戶點擊該屏幕大小，它將激活該塊中的所有CSS。對於這個問題，我用它來隱藏標籤文本，延長包裝的高度以避免不一致的高度，同時也將輸入字段對齊。

旁註

我決定在所有的這些效應增加，因爲所有的現實，你會想使你的網站移動友好的可能不會破壞你的網站真正的美麗。如果你不喜歡它，那沒關係，但請記住一個響應式網站真的很棒。它表明你已經適應了所有的屏幕尺寸以及可能的所有潛在的瀏覽器。

此外，請注意，我在代碼中插入了一個min-width，因此當您重新調整JSFiddle窗口的大小時，您仍然可以以所提供的最小寬度滾動。

DEMO JSFiddle

來源

2014-07-12 03:40:08 BuddhistBeast

泰克斯哥們！我沒有想到這一點！你真棒！ – JuanGD

當然！我很高興你喜歡！ – BuddhistBeast

這樣做的一種快速方法是在包裝容器上設置最小寬度，這樣當寬度變得很小時，您將永遠不會看到兩個元素重疊。

IE：

.wrap{width:100%; min-width:600px;}

例如：http://jsfiddle.net/8w3Am/

來源

2014-07-12 02:28:00 richie

謝謝！顯然解決了這個問題，richie。但是，爲什麼％不起作用？ – JuanGD

如何防止瀏覽器調整大小時移動HTML元素？

回答

相關問題