html - 无序列表的样式如何像表格？

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 列，行数未知

照片可以是肖像(150 像素 X 200 像素)或风景(200 像素 X 150 像素)，但我事先并不知道。因此，一行可以只有风景，只有肖像，或者风景和肖像照片的混合

行间距始终为 10px

标题相互垂直对齐

Answer 1

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;
}

你想要这样的 table 吗？

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