CSS表格布局。完成这个的好方法

Question

我总是想知道如何认真对待CSS。我是一个非常干净的开发人员，但我的CSS似乎闻到了。 只想创建布局，扩展的东西将用javascript制作。有人能告诉我css如何实现这一目标。忘记渐变和文字颜色等。也许需要将来有人将这项工作用于一些学分。

<div class="FAQ">
    <div class="FAQ-Header">
        <div class="Help-Title-Label">Questions and Answers</div>
    </div>
    <div class="FAQ-Entry">
        <div class="FAQ-Question">
            <div class="FAQ-Question-Left">
                <div class="FAQ-Question-State">+</div>
            </div>
            <div class="FAQ-Question-Right">
                <div class="FAQ-Question-Txt">My Question Text</div>
            </div>
        </div>
        <div class="FAQ-Answer">
            <div class="FAQ-Answer-Left">
                <div class="FAQ-Answer-Title">A:</div>
            </div>
            <div class="FAQ-Answer-Right">
                <div class="FAQ-Answer-Txt">My Question Answer.</div>
            </div>
        </div>
    </div>        
    <div class="FAQ-Footer"></div>
</div>

Answer 1

我不会再使用JqueryUI手风琴来重新创建轮子。 http://jqueryui.com/accordion/将css从图片中删除，并在一步中添加实现。

Answer 2

总的来说，我同意vikingben。尽量避免重新发明轮子。

如果您确实需要制作自己的手风琴，我建议您使用HTML表格：

<table class="faq">
    <thead>
        <tr><th colspan="2">Questions and Answers</th></tr>
    </thead>
    <tbody>
        <tr><th>-</th><td>My Question Text</td></tr>
        <tr class="selected"><th>A:</th><td>My Question Answer.</td></tr>
        <tr><th>+</th><td>My Question Text</td></tr>
    </tbody>
</table>

您在这里建模表格数据，表格是用于建模表格数据的精细构造。如果您使用表格，CSS将非常简单。 Example

如果您担心以后需要更改格式，请在此时进行重组。你不应该为未来的HTML标记重构而烦恼，除非你认为它可能会发生并且预先花费的努力是值得的。