Question

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

我正在尝试使用CSS表格显示，以下是我的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;
}

我试图以表格格式显示这些图像及其相应的名称。该表的问题在于根据单元格的内容调整单元格的宽度。但是，我想修复表格单元格宽度（不限制高度）。另外，我想将列数限制为4.还有更多条目应该转到下一行。

任何有关如何实现的帮助都将受到高度赞赏。提前致谢。

Answer 1

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

我必须在里面添加拳击（div）以修复单元格大小。

HTML：

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

CSS：

text-align: center;

希望它有所帮助！

编辑：

要使文字水平居中，您需要容器有<div>。
要水平居中，您需要将文字放在display: table-cell; vertical-align: middle;中，然后添加这些属性{{1}}。它并不像我想的那么漂亮，但效果很好！

CSS表：修复列宽

1 个答案: