以不带表格的表格样式显示段落答案

【问题标题】：Displaying paragraphs in table style without tables以不带表格的表格样式显示段落
【发布时间】：2017-01-17 18:00:56
【问题描述】：

关于一些 CSS 的快速问题。我有这个用表格编码的页面，现在我想将它转换为 CSS。该表包含人员列表的图片和联系信息，因此将其放在 2x2 表中（有四个人）。现在有四个段落填充了我需要的信息，我只需要按正确的顺序排列它们。目前它们都是同一个类，给它们添加 id 会有所帮助吗？

【问题讨论】：

标签： html css tablelayout

【解决方案1】：

将它们添加到<div class="container"> 容器中，并为<p>-tags 赋予以下样式：

div.container p {
    width:50%;
    float:left;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

不，如果他们有相同的班级，那完全没问题。假设他们有课程myblock。

.myblock {
    width:50%;
    padding:0;
    margin:0;
    float:left;
}
.myblock img {
    float:left;
    padding-right:10px;
}

然后这段代码只会将其中两个块彼此相邻放置，每行两个。

<div class="myblock"> 
        <!-- The paragraph --> 
        <img src="people/photo.jpg"/> 
        Name<br/>
        Position<br/> 
        Tel. 123 12345-314
</div>

【讨论】：

与下面的海报一样，但我不希望该页面上的所有段落都具有这种样式。
如果你在它们周围放置一个容器（只是那些你想阻止的），那么 CSS 将不会应用到页面上的所有 <p> 标签。

【解决方案3】：

试试这个...

p {
    display: table-cell
}

编辑：正确的顺序是什么？你能发布一些代码或布局示例吗？

【讨论】：