Làm thế nào để làm cho biên giới sụp đổ (trên một div)?

Giả sử tôi có đánh dấu như: http://jsfiddle.net/R8eCr/1/Làm thế nào để làm cho biên giới sụp đổ (trên một div)?

<div class="container"> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    ... 
</div>

Sau đó CSS

.container { 
    display: table; 
    border-collapse: collapse; 
} 
.column { 
    float: left; 
    overflow: hidden; 
    width: 120px; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

Tôi có div ngoài với display: table; border-collapse: collapse; và các tế bào với display: table-cell tại sao họ vẫn không sụp đổ? Tôi đang thiếu gì ở đây?

Bằng cách này, có thể có số lượng ô biến đổi trong một cột vì vậy tôi không chỉ có đường viền ở một bên.

Nguồn

2013-07-29 Jiew Meng

Um, tại sao bạn không sử dụng '

' và bạn bè cho các bảng? –

@muistooshort, cos có thể có một số lượng ô và tôi không muốn để trống ô trong thiết kế cụ thể –

Liên quan: http://stackoverflow.com/questions/5737693/simulating-border-collapse-in-lists-no -tables –

Trả lời

đây là một demo

đầu tiên bạn cần sửa lỗi cú pháp của bạn của nó

display: table-cell;

không

diaplay: table-cell;

.container { 
    display: table; 
    border-collapse:collapse 
} 
.column { 
    display:table-row; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

Nguồn

2013-07-29 04:08:42 Hushme

Hmm trong mã thực tế, tôi có nó viết đúng ... hmm ... Tôi đoán nó phải là một cái gì đó khác trong mã thực tế thats không làm việc ... Tôi sẽ cố gắng tìm hiểu những gì có thể gây ra –

tôi sửa chữa sai lầm của tôi đúng tôi kiểm tra câu trả lời của bạn nhưng tôi loại bỏ phao: trái và chiều rộng và chiều cao tôi đã biết về biên giới di động – Hushme

@Hushme yeah nhiều người biết nhưng đôi khi treo với vấn đề nhỏ, không? dù sao đi nữa, tôi không có vấn đề gì. –

Bạn cần phải sử dụng display: table-row thay vì float: left; tới cột của bạn và rõ ràng như @Hushme sửa số diaplay: table-cell của bạn thành display: table-cell;

.container { 
    display: table; 
    border-collapse: collapse; 
} 
.column { 
    display: table-row; 
    overflow: hidden; 
    width: 120px; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

demo

Nguồn

2013-07-29 04:16:33

ở đây kiểm tra liên kết tôi đã sử dụng nhưng tôi quên loại bỏ float: left http://jsfiddle.net/R8eCr/2/xem số liên kết – Hushme

vâng, không sao. thật gần gũi. –

Sử dụng lề âm đơn giản hơn là sử dụng bảng hiển thị.

cập nhật trong fiddle JS Fiddle

.container { 
    border-style: solid; 
    border-color: red; 
    border-width: 1px 0 0 1px; 
    display: inline-block; 
} 
.column { 
    float: left; overflow: hidden; 
} 
.cell { 
    border: 1px solid red; width: 120px; height: 20px; 
    margin:-1px 0 0 -1px; 
} 
.clearfix { 
    clear:both; 
}

Nguồn

2014-03-25 22:43:04 gviswanathan

Điều này thật tuyệt! -Clean & Đơn giản. Và nó giữ khái niệm về các cột, cả Hushme và C-link đều phá vỡ các giải pháp của họ. – Superole

Rất thanh lịch, cảm ơn bạn! – Richard

Điều này khá thông minh :) – kavare

Thay vì sử dụng border sử dụng box-shadow:

box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888, /* Just to fix the corner */ 
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

Demo: http://codepen.io/Hawkun/pen/rsIEp

Nguồn

2015-03-02 10:40:54 user1032559

đây thực sự là giải pháp tốt nhất mà tôi đã tìm thấy. Nó sắp xếp vấn đề nếu dữ liệu của bạn được tạo động và nó không đảm bảo hoàn hảo, hãy nói 9 mục trong một lưới, nhưng thay vào đó 2 nếu bạn có điều đó với các giải pháp khác, u bị mất đường viền. Làm tốt ! – Unsparing

Bí quyết tốt cho bố cục đáp ứng, tránh thay đổi thuộc tính hiển thị. – kosmos

Giải pháp tuyệt vời! – banesto

Tại sao không sử dụng đề cương? đó là những gì bạn muốn phác thảo: 1px đỏ;

Nguồn

2016-10-21 04:50:51 Muslimbek

Thêm một số giải thích với câu trả lời cho câu trả lời này giúp OP trong việc sửa vấn đề hiện tại –

Ở đây tôi cho thấy nhiều biến thể của việc thu hẹp biên giới. (sử dụng lưới Bootstrap): http://codepen.io/leonardo1024/pen/KgbNGr – Muslimbek

Bạn cũng có thể sử dụng lợi nhuận tiêu cực:

.column { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 120px; 
 
} 
 
.cell { 
 
    border: 1px solid red; 
 
    width: 120px; 
 
    height: 20px; 
 
    box-sizing: border-box; 
 
} 
 
.cell:not(:first-child) { 
 
    margin-top: -1px; 
 
} 
 
.column:not(:first-child) > .cell { 
 
    margin-left: -1px; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
</div>

Nguồn

2017-01-25 07:16:49 mpen

Tôi đã sử dụng cùng một phương pháp, chỉ với 'border-top/left: 0;'. Lề tạo ra bù đắp. –

@ toster-cx Tôi cho rằng điều đó thậm chí còn tốt hơn là chồng chéo các đường viền. Suy nghĩ tốt :-) – mpen

Các vấn đề liên quan