1

我有一个 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

4

1 回答 1

6

我认为您的意思是：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>
于 2013-07-23T18:48:46.713 回答