CSS 表格：固定列宽

Question

注意：我将在我的 SharePoint 2010 网站上显示此页面。

我正在尝试使用 CSS table 来显示，下面是我的 HTML 代码：

<div id="cr">
    <ul class="contact-img">
        <li><img src="Landing page/Contacts/CassWade.png"></li>
        <li>Cass Wade<br/>Project Manager</li>
        <li><img src="Landing page/Contacts/Meredith.png"></li>
        <li>Meredith<br/>HR Head</li>
        <li><img src="Landing page/Contacts/Simon.png"></li>
        <li>Simon<br/>CEO</li>
        <li><img src="Landing page/Contacts/Roger.png"></li>
        <li>Roger<br/>Director</li>
        <li><img src="Landing page/Contacts/Sharyl.png"></li>
        <li>Sharyl<br/>Employee</li>
    </ul>
    <hr/>
</div>

以上页面是我的CSS：

.contact-img{
    position: relative;
    list-style:none;
    display:table;
    border:none;
    padding:none;
    margin:none;
}

.contact-img li
{
    display:table-cell;
    padding:10px 10px 10px 10px;
    vertical-align:middle;
    margin-left: 25px;
}

我试图以表格格式显示这些图像及其相应的名称。这个 table 的问题是单元格的宽度会根据单元格的内容调整大小。但是，我想修复 table 单元格宽度（对高度没有限制）。我还想将列数限制为 4。任何更多的条目都应该转到下一行。

任何关于如何实现的帮助将不胜感激。提前致谢。

Answer 1

我的解决方案使用 flexbox CSS3 属性来允许对齐框并在 window 变小时换行。如果您不想要这种额外的响应行为，您可以将 max-width 更改为 width，这在任何情况下都将数字元素限制为每行 4 个。

我不得不在里面添加装箱 (div) 来固定单元格大小。

HTML:

<ul class="container">
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
            <div class="description"><div>Cass Wade<br/>Project Manager</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
            <div class="description"><div>Meredith<br/>HR Head</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
            <div class="description"><div>Simon<br/>CEO</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
            <div class="description"><div>Roger<br/>Director</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
            <div class="description"><div>Sharyl<br/>Employee</div></div>
        </div>
    </li>
</ul>

CSS:

.container {
    list-style: none;
    -webkit-padding-start: 0px; /* fixing Chrome auto style */

    display: flex;
    flex-wrap: wrap;

    max-width: 800px; /* max 4 items of 200px width per line  */
}

/* the content as a bloc */
.inside-container {
    width: 200px;
    height: 100px;
    display: flex; /* makes the description to stay next to the image */
}

.inside-container div {
    width: 100px;
    height: 100px;
}

.inside-container div.description {
    text-align: center;
}

.inside-container div.description div {
    display:table-cell;
    vertical-align: middle;
}

希望对您有所帮助！

编辑：

要使文本水平居中，您需要容器具有 text-align: center;.
要水平居中，您需要将文本放在 <div> 中并添加这些属性 display: table-cell; vertical-align: middle;。虽然没有我想要的那么漂亮，但是效果很好！

CSS 表格：固定列宽

CSS Tables: Fixing the column-width

css

css-tables