Question

所以这是我的标记，它基本上是一个图像库。

<div class="img">
 <div class="cont"><a href="#"><img src="logo.jpg" alt="logo" /></a></div>
 <div class="desc">This is the awesome logo</div>
</div>

<div class="img">
 <div class="cont"><a href="#"><img src="logo.jpg" alt="logo" /></a></div>
 <div class="desc">This is the awesome logo</div>
</div>

<div class="img">
 <div class="cont"><a href="#"><img src="logo.jpg" alt="logo" /></a></div>
 <div class="desc">This is the awesome logo</div>
</div>

<div class="img">
 <div class="cont"><a href="#"><img src="logo.jpg" alt="logo" /></a></div>
 <div class="desc">This is the awesome logo</div>
</div>

这是我的CSS

 div.img {position:relative;
          margin:5px;
          border:1px solid #000;
          padding:0;
          width:300px;
          height:300px;
          float:left; 
 }
 div.cont {
          position:absolute;
          left:50%;
          margin-left:-125px;
 }
 div.img img {
          margin-top:5px;
          border:1px solid white;
          padding:0;
          width:250px;
          height:250px;
 }
 div.desc {
          text-align:center;
          color:black;
 }
 div.img a:hover img {
          border:1px solid #666;
}

基本上我的问题是我想要＆＃34; img＆＃34;元素表现得好像它在正常流程中，所以我的＆＃34; desc＆＃34; div可以将它确认为块级元素，并将其自身定位在图像下方（顺便说一下，这是一个徽标），就像我想要的那样，我知道绝对定位的元素会从正常的文档流程中删除，＃39;为什么我的＆＃34; desc＆＃34; div在图像后面，因为它的行为就像＆＃34; img＆＃34;元素根本就不存在，这不是我想要的。

我知道这可以通过改变＆＃34; cont＆＃34;来解决。 div到位置相对，但我想要求位置绝对只是因为我觉得解决这个特定问题和具体情况非常重要，谢谢。

Answer 1

试试DEMO

div.img {position:relative; margin:5px; border:1px solid #000; padding:0; width:300px;       height:300px; float:left; text-align:center; }
 /*div.cont {position:absolute; left:50%; margin-left:-125px;}*/
 div.img img {margin-top:5px; border:1px solid white; padding:0; width:250px; height:250px;}
 div.desc {text-align:center; color:black;}
 div.img a:hover img {border:1px solid #666;}

Answer 2

如何通过提供desc

来定位bottom 0; position:absolute; div

演示：http://jsfiddle.net/lotusgodkk/GCu2D/360/

CSS：

div.desc {
    text-align:center;
    color:black;
    position:absolute;
    bottom:10px; //Can be any value depending on your design.
}

如何制作这个＆＃34; img＆＃34;元素表现得好像在正常流程中？

2 个答案: