Question

我有一个#info div元素，它显示了一些文本字符串，如下所示：

<body>
    ...

   <div id="info">
       ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
   </div>
</body>

我想CSS #info div将它定位在页面的底部中心，所以我做了以下事情：

#info{
    width:100px; 
    margin:0px auto;
}

使用上面的CSS，＃info div位于页面的底部中心， BUT 只显示部分文本字符串（仅显示'...'而没有'ABCDE。 ''显示）。

我认为可能是因为width:100px不足以显示所有文本，所以我改为width:200px，但令人惊讶的是，在我增加宽度后，没有显示任何内容最底层的中心。为什么？

--------------------更新------------------ < / p>

我在#info div上面有另一个div，如果这是原因，那么我想问一下如何将#info div定位到上面的div下方？

Answer 1

我最好的猜测是，你上面有一些重叠并隐藏DIV部分的东西。使用当前文本，它在字母和点之间的空间上分开，将点放在第二行上。 DIV的那一部分显示在第一部分被隐藏的其他地方。当您将宽度增加到200px时，它的宽度足以适应一条线上的所有内容，并且所有内容都会消失。您可能想尝试添加clear: both并查看是否将其推送到隐藏文本的任何内容之下。有时添加边框（或使用浏览器开发人员插件使用元素大纲）可以帮助诊断正在发生的事情。检查你的z-index，以确保你有适当的平面上的东西来做你想要的。

Answer 2

<html>
<head>
 <link rel="stylesheet" href="css.css" type="text/css">
</head> 
 <body>
  <section>
   <div id="info1">
     asdgfawregawregawregawregawregawregaweg
   </div>
   <div id="info2">
     asdgfawregawregawregawregawregawregaweg
   </div>
  </section>
 </body>
</html>

css文件：

#info1 {
 color: red;
}

#info2 {
 width:100px; 
 margin:0px auto;
}

所以...全部显示出来。也许你没有给出足够的信息......

Answer 3

我遇到了这个问题，我将font-size:0的body和Html设置为零，一旦我删除了可见的文本

为什么我的div内容不显示？

3 个答案: