cuốn sách gpt4 ai đã làm

lưới flex với số phần tử lẻ và lề cố định

In lại Tác giả: Walker 123 Thời gian cập nhật: 27-11-2023 23:10:03 26 4
mua khóa gpt4 Nike

Được rồi, điều này làm tôi đau đầu...

Đây là mã/ví dụ của tôi

https://codepen.io/anon/pen/xXpjYa

.uốn cong {
hiển thị: linh hoạt;
flex-wrap: bọc;
}

.imageContainer {
độ uốn: 1 0 30%;
chiều cao: 200px;
đường viền: màu đen đặc 5px;
màu nền: hồng đậm;
lề:15px;
}

.imageContainer:trống {
chiều cao: 0;
đường viền: không có;
};

a

a

a

a



Vấn đề là tôi muốn đạt được/giải quyết hai điều:

  • Các cột ngoài cùng bên trái và ngoài cùng bên phải phải chạm vào cạnh của khung nhìn
  • Khoảng cách cố định phải là 30px và chỉ có hộp màu hồng mới được kéo dài đáp ứng (kéo dài)
  • Lưu ý rằng mục cuối cùng (5) rộng hơn một chút so với các mục khác... tại sao? ?

Xin hãy giúp đỡ! Cảm ơn bạn!

câu trả lời hay nhất

Bạn đặt lề thành 15px,hiện hữu .imageContainer Điều này áp dụng cho tất cả các cạnh, bao gồm cả những cạnh này thùng chứa hình ảnh và khung nhìn. Vì vậy, về cơ bản câu hỏi đầu tiên và câu hỏi thứ hai của bạn trái ngược nhau.

bạn có thể .imageContainer Đặt lề trên cha mẹ .uốn cong Đặt tỷ suất lợi nhuận âm để đạt được cả hai.

Mục hiển thị cuối cùng dài hơn vì hai div phía sau nó bị thu gọn và không hiển thị, điều này ảnh hưởng đến bố cục. Nếu bạn thay đổi thuộc tính css kích thước hộp: hộp viền Thêm vào của bạn .imageContainer quy tắc và nó sẽ giải quyết vấn đề này. Bạn cũng có thể .imageContainer Chỉ định một chiều cao cố định hoặc gán nó cho tất cả .imageContainer Thêm nội dung vào div để ngăn điều này xảy ra.

Nhìn thấy cái hộp mã hóa nàycho mã đã sửa đổi.

Về lưới html - flex với các phần tử lẻ và lề cố định, 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/46594325/

26 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress