如何阻止空的html元素被無量綱化？

我發現漂浮#name固定我的問題左邊。奇怪它仍然居中。我不明白爲什麼這應該是..但它現在有效。

我有一個使用AJAX來更新由腳本生成一些文本元素的Web應用程序。最初加載頁面時，爲空（）。在它下面還有兩個其他元素，全部集中在<div>之內，它們分別是<img>和。

下面是HTML：

<html> 
    <head> 
     <title>Name Generator</title> 
     <link rel="stylesheet" type="text/css" href="static/main.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="static/name.js"></script> 
    </head> 

    <body> 
     <div> 
      <p id="name"> </p><br/> 
      <p id="title">GENERATE YOUR NAME</p> 
      <img id="button" src="static/generator.png"/> 
     </div> 
    </body> 
</html>

和CSS：

body { 
/*border: 1px dashed white;*/ 
position:relative; 
width: 960px; 
margin: 0 auto; 
padding: 0; 
text-align:center; 
background-image:url('static/background-soundproof.png'); 
background-repeat:no-repeat; 
background-size:cover; 
} 

div { 
/*border: 1px dashed blue;*/ 
text-align: center; 
width: 400px; 
height: 600px; 
margin: auto; 
} 

#name { 
color:black; 
text-shadow:0 0 12px white; 
text-transform:capitalize; 
font-family: Impact, Sans-Serif; 
font-weight:100; 
font-size:2.5em; 
margin: 0 auto; 
position: relative; 
top: 60px; 
} 

#title{ 
font-family:Courier, sans-serif; 
font-size:1.5em; 
color:#7D7DBD; 
position: relative; 
top: 400px; 
} 

img { 
margin: auto; 
position: relative; 
top:150px; 
}

我的問題是，當第一次加載頁面，第一是空的，因爲這，它似乎沒有任何尺寸。單擊<img>時，會更新爲某些文本，並且會導致其下方的元素向下移動頁面大約最近更新的的高度。有沒有一種方法可以加載頁面，使空元素具有固定的尺寸，並在更新時保留它。所以它的尺寸基本上不會改變，也沒有任何變化。

我曾嘗試給它的寬度和高度，填充和邊緣在CSS，無濟於事。我也嘗試過讓它最初填寫'&nbsp'，我在某處閱讀可能會有所斬獲，但事實並非如此。任何幫助非常感謝。

來源

2014-01-28 Totem

您可以添加'民height'爲'＃name'。 – mdesdev

@mdesdev它不工作不幸 – Totem

我注意到，如果我浮動左或右的div中的所有元素，問題就會消失。兩個較低的元素浮動到任何一邊，並且第一個p保持居中...... odd – Totem

Demo

添加到您的CSS

p#name{ 
    min-height: 150px; 
}

編輯：

p#name{ 
    display:inline-block; 
    min-width: 150px; 
    min-height: 150px;

}

來源

2014-01-28 01:20:15

我嘗試使用最小高度來無濟於事......看起來我偶然發現了答案...... – Totem

然後嘗試使用display：inline-塊;和最小寬度@圖騰 –

感謝您的意見，但我認爲我已經解決了這個問題。查看我的更新。順便說一句，我也試過這個，但它沒有奏效 – Totem

如何阻止空的html元素被無量綱化？

回答

相關問題