Question

我刚开始使用网络的CSS布局，我实现了以下适合我目的的代码。

它工作的事实可能并不一定意味着它写得很好。

结构化的代码是否很简单？

如果可能的话，你能告诉我如何改进这段代码吗？

提前致谢。

Click here for the current implementation

<div class='container'>

    <div class='listItem'>

        <!-- Column 1 -->
        <div class='col1'> </div>

         <!-- Column 2 -->
        <div class="col2">
            <div class="col2up">
                <div class="author">Author</div>
                <div class="date">Date</div>
            </div>
            <div class="col2down"> 
                <div class="message">message........</div>
            </div>
        </div>

         <!-- Column 3 -->
        <div class="col3">
            <span>Like</span>
            <span>Replay</span>
        </div>

         <!-- Footer -->
        <div class="linedot">&nbsp;</div>

    </div>

</div>

几行CSS代码（see this link for all code）：

.container {
    width: 500px;
    height: auto;
    border: 1px dotted #f0f;
}
.listItem {
    margin: 0 auto;
    margin-top: 8px;
    height: 90px;
}
.listItem div.col1 {
    float: left;
    width: 15%;
    border: 1px dotted #000;
    height: 100%;
}
.listItem div.col2 {
    float: left;
    width: 49%;
    height: 100%;
}
..............

Answer 1

我添加了对CSS和HTML的改进，请参阅http://jsfiddle.net/FJhQ7/17/
。另请阅读我在建议更改的行中添加的评论。

一些注意事项：

请勿使用 进行样式设置。我已从 中删除<div class="linedot"> </div>，并将height: 1.2em;添加到.linedot CSS声明中。
不要再次定义样式属性，这些属性是正确继承的。这些包括自己的声明，但也包括浏览器继承的定义，例如text-decoration: none;
不要包含与生产源中的任何内容不匹配的选择器。过时的代码=不必要的网络容量使用。
我自己没有实现这个建议，因为你可能想要实现不同的维度：当绝对（%）可以使用时，不要使用相对单位（px）使用，因为相对单位需要更多的计算能力（因此渲染速度较慢）。您已为（子）容器定义了固定高度（90px）和宽度（500px），但您正在使用子元素的相对单位（height:..%）。您可以自己轻松转换这些单位。
请记住：偏移高度/宽度=边距+边框+填充+高度/宽度

如何改进这个看起来像表格的CSS布局

1 个答案: