Question

我对CSS中的无表格布局毫无头绪，并希望将一个简单的注释系统转换为CSS中的简单注释系统。这是表格的样子。

<table>
    <tr>
        <td>
            <img src="headshot.gif" width=40 border-0>
        </td>
        <td><span style="font-color:gold;font-weight:bold;">Kumar</span>
            <br>I really liked the movie - 3 days ago</td>
    </tr>
</table>

任何人都可以通过无桌面布局建议正确的方法。

Answer 1

http://jsfiddle.net/SfeMs/

div .img {
    display: inline-block;
    width: 100px;
    background: red;
    vertical-align: top;
}

div .text {
    display: inline-block;
    width: 400px;
    background: blue;
}

颜色和宽度并不重要。只需制作几个内联块跨度。

Answer 2

请从这里查看我的答案： Make two parallel `<div>` colums the same height
您可以将一个“列”用于图像，将另一个用于文本

Answer 3

我想我可以帮助我找到过去有效的例子。让我们从HTML开始：

<form action="" method="post">
    <ul id="regis_ul">
        <li id="regis_li">
            <label><span> Username: </span>
 <span><input type = 'text' name ='username' id ='username' value = ></span>
            </label>
        </li>
        <li id="regis_li">
            <label> <span> Password: </span>
    <span><input type = 'password' name ='password' id ='password' value ='' ></span>

            </label>
        </li>
        <li id="regis_li">
            <label> <span> Retype Password: </span>
    <span><input type = 'password' name ='repassword' id ='repassword' value ='' ></span>

            </label>
        </li>
        <li id="regis_li">
            <label> <span> Email Address: </span>
    <span><input type = 'text' name ='email' id ='email' value ='' ></span>
            </label>
        </li>
    </ul>
    <input type='submit' name='submit' value='Register'>
</form>
</div>

这只是建立一个简单的，类似盒子的结构化系统，允许注册页面，但可以轻松地重新构建成为用于评论的内容。现在这里是关键部分，最初设计所有内容的CSS：

#regis_ul {
    display:table;
}
#regis_li {
    display:table-row-group;
}
#sub_but {
    margin-left: 0 auto;
}
span {
    display: table-cell;
}
label {
    display: table-row;
}

在这方面需要注意的一件事是这里的许多CSS元素中使用的显示选择。更多，可以找到准确的信息here以及可以在CSS中使用的许多其他技巧。为了提供更多信息，这种显示方法“欺骗”浏览器认为它是一个表并将其显示为一个表。使用表和无序列表有什么区别？所有这些信息都可以找到here，其中包含利弊列表。

现在你可能想知道这实际上是什么样的，我已经提供了一个具有确切表示的JsFiddle。

那你现在做什么？嗯..我鼓励你玩我提供的代码，它会帮助你找到你想要的评论系统的确切的布局。有几点要注意，你最终需要..一个div，它实际上包含了整个元素集（就像一个安全预防措施，以确保所有信息都保留在盒子上）然后是一个无序的列表创建一个结构化的流程......

最后，我想提一下，您可以使用此评论系统轻松实现MySQL和PHP，但如果您不知道那是什么，那么甚至不用担心它:)。我鼓励您探索和玩我的示例，并使用Almanac在CSS中查看有关酷炫事物的更多信息。

祝你未来的编码项目好运，我希望一切顺利。）

css：用于评论的无表格布局

3 个答案: