Flexbox作爲Firefox和Opera上的表格的替代品

我們都知道Firefox和Opera在處理表格方面非常吸引人。使用下面的代碼和css，我的表格在Chrome和Safari上完美顯示。在Firefox和Opera上，項目顯示行中的填充幾乎增加了三倍，導致四個半項溢出。桌子看起來很糟糕，說得很溫和。Flexbox作爲Firefox和Opera上的表格的替代品

HTML：

<div class= 'span10'> 
<!-- <div class= 'span2'>-->     
    <div class='photos'> 
     <table cellspacing="0"> 
      <% @books.in_groups_of(9, false).shuffle.each do |books| %>       
       <tr> 
        <% for book in books.shuffle %> 
         <td> 
          <%= link_to image_tag(book.image_url, :class => 'book') %> 
          <% if current_user.try(:admin?) %>             
          <%= link_to 'Edit', edit_book_path(book) %> | 
          <%= link_to 'Destroy', video, method: :delete, data: { confirm: 'Are you sure?' } %> 
          <%= link_to 'New Book', new_book_path %> 
          <% else %> 
          <% end %> 
          <div class='hrline'><hr /></div> 
         </td> 
        <% end %> 
       </tr> 
        <% end %> 
     </table>      
    </div> 
    <!-- </div> --> 
</div>

CSS：

.photos { 
    width: 1600px; 
    margin-left: 5px; 
    padding: 5px; 
    position: relative; 
} 


.photos img { 
    width: 128px; 
    height: 194px; 
    margin-left: -25px; 
    padding: 5px; 
    position: relative; 
}

於是，我放棄了表標籤：

<div class= 'span10'> 
<!-- <div class= 'span2'> -->     
    <div class='photos'> 
     <!-- <table cellspacing="0"> --> 
     <% @books.in_groups_of(9, false).shuffle.each do|books| %>       
       <!-- <tr> --> 
       <% for book in books.shuffle %> 
        <!-- <td> --> 
        <%= link_to image_tag(book.image_url, :class => 'book') %> 
         <% if current_user.try(:admin?) %>             
         <%= link_to 'Edit', edit_book_path(book) %> | 
         <%= link_to 'Destroy', video, method: :delete, data: { confirm: 'Are you sure?' } %> 
         <%= link_to 'New Book', new_book_path %> 
         <% else %> 
         <% end %> 
         <div class='hrline'><hr /></div> 
        <!-- </td> --> 
         <% end %> 
       <!-- </tr> --> 
     <% end %> 
    <!--</table>-->    
</div> 
<!--</div>--> 
</div>

，並決定採用流行的Flexbox的，這裏是造型我使用：

.photos { 
    width: 1600px; 
    margin-left: 5px; 
    padding: 5px; 
    position: relative; 
    border-collapse:collapse; 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
    -webkit-flex-align-items: baseline; 
    -webkit-flex-direction: row; 
    display: flex; 
    flex-flow: column; 
    lex-align-items: baseline; 
    flex-pack: distribute; 
    flex-direction: row; 
}

我很高興，從我讀到的，這將結束噩夢。但是，當我刷新頁面時，這些項目（本例中的書籍）在所有4個瀏覽器上每行顯示一個項目。

注意：我使用無序列表作爲上述代碼的變體，但似乎沒有幫助。

來源

2013-07-10 Adam

模板代碼沒有用，請提供*生成* HTML。 Opera和Firefox在顯示錶格時沒有問題。 Flexbox不是表格的替代品：表格用於表格數據。 – cimmanon

我提交的代碼是嵌入在Ruby中的html代碼。我會提交整個頁面源代碼，但是當您發表評論時，Stackoverflow只允許少數字符。生成的代碼沒有什麼不同：它只顯示一堆行的項目。 – Adam

對，你用生成的代碼追加你的問題。編輯每一個標籤是一件痛苦的事情，特別是當你考慮到你所要做的只是查看源代碼並粘貼HTML。幾小時前你可能已經得到了你的答案。 – cimmanon

我終於到了這個問題的底部：這是我一直以來認爲的CSS。

所以，我一直在我的表，與瀏覽器寶石的幫助：https://github.com/fnando/browser，我能夠擔任一定的CSS Firefox和Opera，另一個Chrome和Safari和照顧它精美。下面是我做的：

<% if browser.firefox? || browser.opera? %> 
    <div class='fire-photos'> //css for firefox and opera 
<% else %> 
    <div class='photos'> //css for chrome and safari 
<% end %> 
     <table> 
       <tr> 
        <td> 
        </td> 
       </tr> 
     </table> 
    </div>

來源

2013-07-22 17:59:23 Adam

Flexbox作爲Firefox和Opera上的表格的替代品

回答

相關問題