CSS表格佈局。好的方法來完成這

我總是想知道我怎麼能認真對待css。我是一個非常乾淨的開發人員，但我的CSS似乎聞到。只是想創建佈局的擴展的東西將與JavaScript。有人可以告訴我一個解決方案在CSS如何完成。忘記漸變和文字顏色等。也許需要有人在未來將採取這項工作的一些學分。CSS表格佈局。好的方法來完成這

enter image description here

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

來源

2013-05-21 MR.ABC

你甚至沒有發佈'

'標籤HTML，所以我不知道從哪裏開始。 –

那麼多div ...... – AJak

不，它不能。整個表格的要點是，您可以在欄目中找到適合殘疾人員的機器可讀的行和數據單元。 –

回答

一般來說，我贊同維京人。儘量避免重新發明輪子。

如果確實需要使自己的手風琴我建議使用一個表，你的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標記重構而煩惱，並且爲避免這種情況而付出的努力是值得的。

來源

2013-05-21 04:19:44

我不會重新創建輪只使用jQueryUI的手風琴。 http://jqueryui.com/accordion/將css帶出圖片並在一個步驟中添加實現。

來源

2013-05-21 03:58:56 vikingben

不是一個錯誤的答案。 –

或者，使用boostrap摺疊http://twitter.github.io/bootstrap/javascript.html#collapse – Rudy

Bootstrap不錯，另一個不錯的選擇。 – vikingben

相關問題