样式无序列表如表？

Question

为下面的HTML代码设置无序列表的最佳方法是什么：

<ul class="photo-grid">
    <li class="photo">
        <a href="#" class="photo-link">
            <img src="photo1_150x200.jpg" class="photo-img" />
            <span class="photo-title">this is my girl</span>
        </a>
    </li>

    <li class="photo">
        <a href="#" class="photo-link">
            <img src="photo2_150x200.png" class="photo-img" />
            <span class="photo-title">this_is_photo_for_anonymous_people</span>
        </a>
    </li>
</ul>

我想这样做：

将页面划分为4列，行数未知

照片可以是肖像（150px X 200px）或横向（200px X 150px），但我不知道这是前期的。因此，行可以仅具有横向，仅具有纵向，或者具有横向和纵向照片的混合

行之间的间距始终为10px

标题彼此垂直对齐

Answer 1

看看这个：http://jsfiddle.net/oex9sd2o。

此外，在变量增强的图像情况下垂直对齐文本非常难以实现。如果你真的不需要这个ul > li结构，那么使用常规表结构会非常简化这个过程。

Answer 2

HTML：

<div id="one">
First
</div>
<div id="two">
Two
</div>
<ul class="photo-grid">
    <li class="photo">
        <a href="#" class="photo-link">
            <img src="photo1_150x200.jpg" class="photo-img" />
            <span class="photo-title">this is my girl</span>
        </a>
    </li>

    <li class="photo">
        <a href="#" class="photo-link">
            <img src="photo2_150x200.png" class="photo-img" />
            <span class="photo-title">this_is_photo_for_anonymous_people</span>
        </a>
    </li>
</ul>

CSS：

li {
    display: block;
    border: 2px solid black;
}

#one {
    position: fixed;
    height: 23px;
    width: 35px;
    border: 3px solid black;
}

#two {
    position: fixed;
    margin-top: 27px;
    height: 23px;
    width: 35px;
    border: 3px solid black;
}

你想要一张这样的桌子吗？

如果是这样，您可以根据需要手动将所有内容正确地放置到自己的位置！

Answer 3

让我们使用<figure>和<figcaption>元素！

Barebones示例

这似乎是一个很好的机会来提取<figure>和<figcaption>元素：

<a href="#" class="photo-link">
    <figure>
      <img src="http://www.placehold.it/150X200" />
      <figcaption>Image caption</figcaption>        
    </figure>
</a>

• <figure>个元素与display: inline-block对齐。 vertical-align: bottom确保即使图像高度变化也能排列字幕

• 使用width: 850px上的.wrap创建了4列。宽度足以包含四个200 x 200px列及其50px的边距

• 在此示例中，<figcaption>的高度是固定的，即使文本数量不同，也可确保高度均匀。

完整示例

• 背景颜色只是为了显示块的排列方式。

• 结束元素和开场元素很难相互对抗 - <a><figure></figure></a><a><figure></figure></a> - 这个prevents an inline gap forming between them会导致对齐。

.wrap {
  width: 850px;
  margin: 0 auto;
  background: #999;
  padding-bottom: 10px;
}
figure {
  display: inline-block;
  vertical-align: bottom;
  text-align: center;
  margin: 10px 10px 0 0;
  width: 200px;
  background: #F00;
}
.wrap a {
  color: #000;
  text-decoration: none
}
/*Left margin only for first column of each row*/

.wrap a:first-child figure,
.wrap a:nth-child(4n+1) figure {
  background: #F80;
  margin-left: 10px;
}
/*Prevent baseline gap underneath image*/

figure img {
  vertical-align: bottom;
}
/*
Set height and padding for each caption.
*/

figcaption {
  height: 60px;
  padding: 10px;
}

<div class="wrap">
		<a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/200X150" />
			 <figcaption>Image caption</figcaption>
			</figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/150X200" />
			 <figcaption>Image caption</figcaption>
			 </figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/150X200" />
			 <figcaption>Image caption</figcaption>
			</figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/150X200" />
			 <figcaption>Image caption</figcaption>
			 </figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/150X200" />
			 <figcaption>Image caption</figcaption>
			</figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/200X150" />
			 <figcaption>Image caption</figcaption>
			 </figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/150X200" />
			 <figcaption>Image caption</figcaption>
			</figure></a><a href="#" class="photo-link"><figure>
		<img src="http://www.placehold.it/200X150" />
			 <figcaption>Image caption</figcaption>
			 </figure></a>
	</div>