sách gpt4 ai đã đi

Ngăn chặn số lượng cột phá vỡ đường viền của phần tử

In lại Tác giả: Technical Little Cat Thời gian cập nhật: 2023-10-29 11:38:40 25 4
mua khóa gpt4 Nike

Tôi đang tạo bố cục bằng cách sử dụng column-count và -webkit-column-count nhưng tôi thấy một sự cố xuất hiện nhiều lần.

nhập mô tả hình ảnh ở đây

Như bạn có thể thấy từ hình ảnh này, Chrome 45 (không xảy ra trong FF) phá vỡ đường viền của phần tử, điều này rất kỳ lạ và rất khó chịu. Đây là mã nơi ngắt xảy ra (nhưngTôi không biết tại sao điều đó không xảy ra ở đây, sự khác biệt duy nhất là phông chữ và không có thiết lập lại css của Mayers):

thân hình {
chiều cao dòng: 1,5;
}
hình thức {
-webkit-column-count: 2;
số cột: 2;
}
nhãn {
hiển thị: khối;
-webkit-column-break-inside: tránh;
page-break-side: tránh;
đột nhập: tránh;
lề trên cùng: 0,625em;
}
đầu vào {
viền: 1px màu xanh lá cây đặc;
bán kính đường viền: 4px;
đệm: 0,25em 0,5em;
}
nhãn>span:first-child {
chiều rộng: 5em;
hiển thị: khối nội tuyến;
}

CẤU HÌNH:





Di động



Hoạt hình


Tần suất:



Loại trừ:


Nhưng nó không có tác dụng. Bạn có thể cho tôi chút cảm hứng không?

1 Câu trả lời

Mặc dù câu hỏi của bạn không rõ ràng lắm (không có thẻ), nhưng phần tử biểu mẫu của bạn (nhãnđầu vào) dường như không được gói trong hộp đựng riêng mà hoạt động độc lập.

Bạn chỉ nhãn để ngăn chặn sự gián đoạn, vì vậy đầu vào Không tuân theo quy định này. Đó là lý do tại sao bạn gặp phải vấn đề này.

Giải pháp tốt nhất là di chuyển nhãn-đầu vào Các bộ được gói trong chính chúng phân chia và áp dụng nó vào những bộ sưu tập này đột nhập: tránh phân chia.

Ví dụ:

* { kích thước hộp: hộp viền; }
biểu mẫu { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

biểu mẫu > div { -webkit-column-break-inside: tránh; page-break-inside: tránh; break-inside: tránh-column; }

nhãn biểu mẫu, đầu vào biểu mẫu { hiển thị: khối nội tuyến; lề: 4px 0px; }
hình thức đầu vào[kiểu=văn bản] { chiều rộng: 50%; }

























Đàn vĩ cầm Xem hiệu ứng thay đổi kích thước: http://jsfiddle.net/abhitalks/jd7v0n8e/

Lưu ý: Quy tắc phong cách cuối cùng trong ví dụ trên là để ngăn chặn đầu vào tràn.

biên tập:

(Theo dõi các bình luận của Op)

Bây giờ bạn đã cung cấp đánh dấu, cách sắp xếp này cũng sẽ hiệu quả. Miễn là bạn đảm bảo tất cả đầu vào được đóng gói đúng cách trong những nhãn ở giữa.

Xem clip này:

* { kích thước hộp: hộp viền; } 
hình thức{
-webkit-column-count: 2;
số cột: 2;
}
nhãn {
hiển thị: khối; lề: 2px;
-webkit-column-break-inside: tránh;
page-break-side: tránh;
đột nhập: tránh cột;
}
đầu vào {
viền: 1px màu xanh lá cây đặc;
chiều rộng: 50%;
}









Và cây vĩ cầm này:http://jsfiddle.net/abhitalks/38wjpu28/3/

Có vẻ như bạn có nội dung khác trong mã đánh dấu ngoài những gì bạn thể hiện trong câu hỏi.

Lưu ý 2: Tôi khuyên bạn nên sử dụng gói phân chia và sẽ nhãnđầu vào chia. Điều này sẽ giúp bạn kiểm soát tốt hơn nếu bạn cần thay đổi bố cục sau này. (Ví dụ, nếu bạn cần nhãn Địa điểm đầu vào nằm chồng lên nhau thay vì nằm cạnh nhau)

Liên quan đến CSS - Ngăn chặn số lượng cột vi phạm đường viền của một phần tử, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/32477400/

25 4 0
Công nghệ mèo con
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com