Question

我正在尝试制作一个看起来像这样的表：

但我不太清楚如何去做。

最终结果应如下所示：

我打算制作一个div，然后将div的背景设置为灰色纹理部分，然后在该div中创建一个表来组织内容。在这种情况下使用表是否正确？还是有更好的方法？提前谢谢。

Answer 1

坚持使用非表格标记。今天的最佳实践建议您只应将表格用于表格数据，而这些内容不是表格数据。

您可以使用几种不同的方法来实现这一目标，包括使用浮点数，显示内联块等。还有考虑内容环绕图像（例如，如果内容很长）。

但是这里有一些示例代码可以让你滚动。

样式：

div.left,
div.right {
    width: 400px;
    overflow: hidden; /* forces the div to clear the floated content */
}

div.left img,
div.right img {
    border: 2px solid #888;
}

div.left img {
    float: left;
    padding-right: 20px;
}

div.right img {
    float: right;
    padding-left: 20px;
}

html标记：

<div class="left">
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p>
</div>
<div class="right">
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p>
</div>

Answer 2

这是DEMO

这应该向您展示您需要的确切内容。

<body>
    <div id="topLeft"></div>
    <div id="topRight"></div>
    <div id="middleLeft"></div>
    <div id="middleRight"></div>
    <div id="bottomLeft"></div>
    <div id="bottomRight"right></div>
</body>

body { 
    height:400px;
}
#topLeft {
    background-color:#000000;
    width:32%;
    height:32%;
    margin:5px;
    float:left;
}
#topRight {
    float:right;
    background-color: #000000;
    width:65%;
    height:32%;
    margin:5px;
}
#middleLeft {
    background-color:#000000;
    width:65%;
    height:32%;
    margin:5px;
    float:left;
}
#middleRight {
    float:right;
    background-color: #000000;
    width:32%;
    height:32%;
    margin:5px;
}
#bottomLeft {
    float:left;
    background-color: #000000;
    width:32%;
    height:32%;
    margin:5px;
}
#bottomRight {
    float:right;
    background-color: #000000;
    width:65%;
    height:32%;
    margin:5px;
}

可以用包装纸替换身体并适当调整尺寸。

Code on jsFiddle

Answer 3

Fooey对那些说不要使用牌桌的仇敌。我会完全使用一张桌子。

<table>
  <tr>
    <td colspan=1><img src="yadayada"></td>
    <td colspan=2>Lorem Ipsum...</td>
  </tr>
  <tr>
    <td colspan=2>Lorem Ipsum...</td>
    <td colspan=1><img src="yadayada"></td>
  </tr>
  <tr>
    <td colspan=1><img src="yadayada"></td>
    <td colspan=2>Lorem Ipsum...</td>
  </tr>
</table>

试图制作自定义表格

3 个答案: