Lợi ích của thiết kế không cần thiết là gì nếu bạn cần xóa các khối ở khắp mọi nơi?

Question

Tôi hiểu rằng mục tiêu di chuyển về phía <div> thẻ từ <table> có ý nghĩa vì nó có ngữ nghĩa hơn. Tuy nhiên, tôi không hiểu lợi ích thu được nếu bạn vẫn cần một khối thanh toán bù trừ để bố cục dựa trên cột hoạt động. Ví dụ:

<!-- Note: location-info & personal-info both float left. --> 
<div class="contact"> 
    <div class="personal-info"> 
     <p> 
      Shawn, etc, etc 
     </p> 
    </div> 
    <div class="location-info"> 
     <p><address>etc</address></p> 
    </div> 
    <br style="clear:both" /> <!-- clearing block --> 
</div> 

Thẻ không liên quan <br> được sử dụng đúng để mô tả kiểu và bắt buộc phải thực hiện bố cục. Điều này không làm hỏng tất cả lợi ích thu được từ việc xóa bảng?

Answer 1

Nếu tôi nói với bạn youdidn'tneed khối xóa?

.clear-block:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
.clear-block { 
 
    display: inline-block; 
 
}

<div id="wrapper" class="clear-block"> 
 
    <div style="float:right"> 
 
     Your content here 
 
    </div> 
 
    <div style="float:left"> 
 
     More content here 
 
    </div> 
 
</div>

JSFiddle

Answer 2

Không gì cả. Có rất nhiều lợi ích khác để tránh sử dụng bảng.

• Tables instead of DIVs
• DIVs vs. TABLEs a rebuttal please
• DIV's vs. Tables or CSS vs. Being Stupid

Answer 3

Nếu bạn đang hiển thị dữ liệu dạng bảng, nó vẫn có ý nghĩa hơn để sử dụng bảng sau đó nhiều divs lưu hành. Sử dụng các công cụ bạn có một cách khôn ngoan - không sử dụng một cách mù quáng CSS nơi bảng là tùy chọn tốt nhất.

Answer 4

Khi câu trả lời của annakata hiển thị, bạn không cần những khối xóa đó. Nhưng ngoài việc này, một lợi thế để tránh các bảng là trang có thể được kết xuất dần dần. Bảng chỉ có thể được hiển thị khi bảng toàn bộ, bao gồm tất cả nội dung của bảng, đã được phân tích cú pháp, có thể mất một lúc nếu bạn có trang lớn và kết nối chậm. divs có thể được trả lại ngay lập tức, có nghĩa là bạn có thể trình bày một cái gì đó có thể sử dụng cho người dùng sớm hơn nhiều so với các bảng.

Tất nhiên, đây chỉ là một chút lợi thế tiền thưởng tốt đẹp, nó không phải là, và không nên lý do để tránh bảng (đối với dữ liệu phi bảng)

Answer 5

Tôi hiểu rằng mục tiêu di chuyển về phía <div> thẻ từ <table> có ý nghĩa vì nó có ngữ nghĩa hơn.

Trên thực tế, đó là hoàn toàn ngược lại: di chuyển <table>-<div> làm cho HTML của bạn ít ngữ nghĩa. Trên thực tế, toàn bộ toàn bộ điểm của các thành phần <div> (và <span>) là có không ngữ nghĩa!

Nó luôn luôn làm tôi thất vọng, khi tôi thấy một khu rừng của <div> s được mô tả là "ngữ nghĩa HTML". Không, không phải! Đó là * un- * HTML ngữ nghĩa! Đặc biệt nếu nó chứa rất nhiều <div class='float-left'>, <div id='bottom'> và các mục yêu thích cá nhân của tôi <div class='paragraph'> và <span class='emphasis'>.

Đừng làm cho tôi sai, sử dụng un-ngữ nghĩa <div> s chắc chắn là tốt hơn so với sử dụng sai -semantic <table> s, nhưng thậm chí tốt hơn sẽ được sử dụng ngữ nghĩa đúng yếu tố - mặc dù trong nhiều trường hợp, vấn đề HTML đó không cung cấp bất kỳ thứ gì. Ví dụ: trong đoạn mã của bạn, bạn sử dụng phần tử <address>, nhưng theo the specification, thành phần này là không có nghĩa là để đánh dấu địa chỉ! Đó là chỉ để đánh dấu địa chỉ của tác giả của trang - IOW nó hoàn toàn vô dụng.

Ví dụ bạn đăng thiếu nhiều ngữ cảnh, rất khó để nói, nhưng có vẻ như bạn có thể muốn hiển thị dữ liệu dạng bảng hoặc phân cấp, trong trường hợp này <table> s hoặc <ul> s có thể là lựa chọn tốt hơn.

---

Hoàn toàn không liên quan đến câu hỏi của bạn: bạn có thể muốn có một cái nhìn tại hCard và XOXO vi dữ liệu.

Answer 6

Cá nhân tôi sử dụng chức năng clearfix hack cho các nhu cầu thanh toán bù trừ của tôi.

/* Clearfix */ 
#content:after, 
.box:after { 
    content:'.'; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    height: 0; 
} 
#content, 
.box { 
    zoom: 1; /* IE */ 
} 

Lưu ý Tôi chỉ tách riêng các bộ chọn thay vì thêm clearfix vào mọi thứ. Nó hoạt động thực sự tốt. Vấn đề duy nhất là tài sản zoom là IE cụ thể và không xác nhận, nhưng không có tác dụng phụ như đôi khi có thể có với các tài sản khác, như overflow: auto.

Tôi đã sử dụng điều này trong các trang web chuyên nghiệp trong 5 năm mà không gặp vấn đề gì.