开发者

Why isn't my div content showing?

开发者 https://www.devze.com 2023-04-08 17:43 出处:网络
I have a #info div element which shows some text strings like below: <body> ... <div id=\"info\">

I have a #info div element which shows some text strings like below:

<body>
    ...

   <div id="info">
       ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
   </div>
</body>
开发者_开发百科

I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:

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

With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).

I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?

-------------------- UPDATE ------------------

I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?


My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.


<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 file:

#info1 {
 color: red;
}

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

So... all displayed. Maybe you give not enough information...


I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible

0

精彩评论

暂无评论...
验证码 换一张
取 消