5

我正在尝试制作一个如下所示的表格：

但我不太确定如何去做。

最终结果应该如下所示：

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

4

3 回答 3

6

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

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

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

款式：

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>
于 2013-06-13T19:20:05.383 回答
0

Here is a DEMO

This should show you exactly what you need.

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

The body can be replaced with a wrapper and sized appropriately.

Code on jsFiddle
于 2013-06-13T19:24:12.187 回答
0

对那些说不要使用桌子的仇恨者嗤之以鼻。我完全会为此使用一张桌子。

<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>
于 2013-06-13T19:34:28.737 回答