Question

我试图复制Facebook页面帖子的设计和结构。

＆＃13;

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
    color: #365899;
    cursor: pointer;
    text-decoration: none;
}
.post td {
    vertical-align: top;
}
.timestamp {
    font-size: 13px;
    color: #999;
}

＆＃13;

<div class="post">
    <table>
        <tbody>
            <tr>
                <td>
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <strong><a>Toomblr</a></strong>
                            </td>
                        </tr>
                        <tr class="timestamp">
                            <td>
                                20/01/2017 - 11:43
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

以下是我所拥有的JSFiddle：https://jsfiddle.net/6nodfbdj/

正如您所看到的，图片只有50x50，但它无缘无故地将td推到一边。

不知何故，它与包含内容的td发生冲突。所以基本上发生了什么，无论内容的宽度td是什么，也是为包含图像的td设置的。

有什么想法吗？

Answer 1

由<td>中包含＆＃34;部分内容＆＃34;的文字宽度设定。尝试：

<td colspan=2>
    Some content.
</td>

Answer 2

如其中一条评论所述，表格不能用于格式化。它们用于表格数据。

来自w3.org网站

表格不应仅仅用作布局文档内容的方法，因为在呈现给非可视媒体时可能会出现问题。此外，当与图形一起使用时，这些表可能会强制用户水平滚动以查看在具有更大显示的系统上设计的表。为了最大限度地减少这些问题，作者应该使用样式表来控制布局而不是表格。

请注意。此规范包含有关表的更详细信息   https://www.w3.org/TR/html401/appendix/notes.html#notes-tables

相反，你应该使用CSS。虽然布局和尺寸与您的小提琴不完全相同，但请查看https://jsfiddle.net/ringhidb/jeeu2yrt/

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
        body {
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 16px;
        }

a {
  color: #365899;
  cursor: pointer;
  text-decoration: none;
}

.post {
  position: absolute;
}

.header {}

.logo {
  float: left;
  padding: .1em;
}

.info {
  float: left;
  padding: .25em;
}

.site {
  font-size: 1.02em;
  font-weight: bold;
}

.timestamp {
  font-size: .75em;
  color: #999;
}

.content {
  clear: both;
}

  </style>

 <title>CSS Layout</title>

</head>

<body>
  <div class="post">
    <div class="header">
      <div class="logo">
        <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
      </div>
      <div class="info">
        <a class="site">Toomblr</a>

        <div class="timestamp">20/01/2017 - 11:43</div>
      </div>
    </div>

    <div class="content">
      Some content.
    </div>
  </div>
</body>

</html>

Answer 3

我不知道你想做什么，但试试这个。

.post td {
    vertical-align:top;
    float:left;
}

Answer 4

你有一个“备用单元”可以用rowspan和colspan修复。试试这个：

<body>
<div class="post">
    <table>
        <tbody>
            <tr>
                <td rowspan=2>
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
                </td>
                <td>
                <strong><a>Toomblr</a></strong>
                </td>
                </tr>
                        <tr class="timestamp">
                            <td>
                                20/01/2017 - 11:43
                            </td></tr>
            <tr>
                <td colspan=2>
                    Some content.
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</body>

Answer 5

您尝试过图像宽度100％吗？

为什么我的图像向右推？

5 个答案: