Question

我有一个3x3的图像网格。我希望能够做到的是让文字放在每张图片的正上方，但我似乎无法弄清楚如何去做。

我的CSS

 body{background-color:black;}

ul#grid {
  list-style: none;
  width: 1180px;
  margin:0 auto;
  overflow:hidden;
   }

#grid li {
  float: left;
  margin: 0 10px 70px 0px;
  display:inline;
  position:relative;
   }

#grid li img {
  padding: 15px; margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
   }

HTML

<div class="portfolio">
  <ul id="grid">   
    <li><a href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>
    <li><a href="#"><img src="4.jpg"></a></li>
    <li><a href="#"><img src="5.jpg"></a></li>
    <li><a href="#"><img src="6.jpg"></a></li>
    <li><a href="#"><img src="7.jpg"></a></li>
    <li><a href="#"><img src="8.jpg"></a></li>
    <li><a href="#"><img src="9.jpg"></a></li>
     </ul></div>

jsfiddle

Answer 1

我认为你的意思是：http://jsfiddle.net/feitla/dWuCH/3/

（编辑小提琴：玩得开心：）

#grid li span {
    display:block;
    bottom:200px;
    position:relative;
    width:370px;
    margin-left:20px;
}

<div class="portfolio">
    <ul id="grid">
        <li><a href="#"><img src="1.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="2.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="3.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="4.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="5.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="6.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="7.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="8.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="9.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
    </ul>
</div>

让文字坐在图像上

1 个答案: