Question

更新

我发现向左浮动#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'来填充它，我在某处读到的可能会有所作为，但事实并非如此。任何帮助非常感谢。

Answer 1

Demo

将此添加到您的css

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

编辑：

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

}

如何阻止空的html元素无量纲？

1 个答案: