Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - Tạo các div có chiều cao bằng nhau dựa trên nội dung động mà không cần JavaScript

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

Đối với trang sản phẩm, tôi cần hiển thị một số sản phẩm (có hình ảnh cộng với tiêu đề bên dưới hình ảnh). Nhiều sản phẩm sẽ được hiển thị trên một hàng và các sản phẩm tiếp theo sẽ được hiển thị ở hàng tiếp theo. Số lượng hình ảnh liên tiếp phụ thuộc vào kích thước màn hình (đáp ứng).

Tiêu đề của mỗi hàng sản phẩm phải được căn chỉnh theo chiều dọc ở cùng độ cao của trang. Ngoài ra, các hình ảnh trong hàng phải được căn chỉnh theo chiều dọc ở giữa hình ảnh của hàng theo chiều dọc.

Hình ảnh sản phẩm sẽ được tải từ CMS (WordPress) ở giai đoạn sau nên tỷ lệ khung hình sẽ khác nhau.

Tôi đã tạo một giải pháp JavaScript hoạt động hoàn hảo... cho các trình duyệt đã bật javascript. Bạn có thể kiểm tra nóđâyMã này như sau. Nhưng tôi muốn một giải pháp không phải JavaScript, điều này có khả thi không? Tôi đang tạo những chiếc phao có cùng chiều cao div Tôi đang gặp sự cố trong đó chiều cao phải tuân theo chiều cao của hình ảnh có chiều cao lớn nhất.

Tái bút: Kích thước hình ảnh cũng phải đáp ứng, tức là chiều rộng hình ảnh phải chứa div phần trăm.

Mã JavaScript:

thay đổi kích thước_products();
window.addEventListener('resize', function() {
  thay đổi kích thước_products();
}, ĐÚNG VẬY);

hàm thay đổi kích thước_products() {
  var img_padding = 10 //THIẾT LẬP BẰNG Lề

  // thay đổi kích thước hình ảnh
  var img_wrapper_dv = document.getElementsByClassName("product-img-wrapper");
  if (img_wrapper_dv.length > 0) {
    var div_width = img_wrapper_dv[0].offsetWidth;
    tỷ lệ var = [];
    tỷ lệ [0] = 3/2 // chiều rộng / chiều cao
    tỷ lệ [1] = 2/3;
    tỷ lệ [2] = 1;
    tỷ lệ [3] = 4/3;
    tỷ lệ [4] = 3/4;
    tỷ lệ [5] = 1;
    tỷ lệ [6] = 3/2;
    tỷ lệ [7] = 2/3;
    tỷ lệ [8] = 1;

    var max_height = 0;
    for (var i = 0; i < rate.length; i++) {
      var img = document.getElementById("product-img" + i);
      var img_width = div_width * Math.sqrt(2 / 3 * rate[i]) - 2 * img_padding;
      img.style.width = img_width;
      var img_height = img_width / rate[i];
      if (img_height > max_height) max_height = img_height;
    }
    for (var i = 0; i < img_wrapper_dv.length; i++) {
      img_wrapper_dv[i].style.height = max_height + 2 * img_padding;
    }
  }
}
* {
  kích thước hộp: hộp viền;
}

.product-img {
  chiều cao: tự động;
  vị trí: tương đối;
  trên cùng: 50%;
  trái: 50%;
  -webkit-transform: dịch(-50%, -50%);
  biến đổi: dịch(-50%, -50%);
  hiển thị: khối;
}

.product-wrapper {
  vị trí: tương đối;
  lề: 10px;
  chiều rộng: calc(20% - 20px);
  /* 5 sản phẩm liên tiếp */
  đường viền: 1px liền khối #DDD;
  nổi: trái;
}

.product-title {
  hiển thị: khối;
  căn chỉnh văn bản: giữa;
  Họ phông chữ: Arial, sans-serif;
  lề: 10px;
}

Màn hình @media và (độ rộng tối đa: 1200px) {
  .product-wrapper {
    chiều rộng: calc(25% - 20px);
  }
  /* 4 sản phẩm liên tiếp */
}

Màn hình @media và (độ rộng tối đa: 1000px) {
  .product-wrapper {
    chiều rộng: calc(33,33333% - 20px);
  }
  /*3 sản phẩm liên tiếp*/
}

Màn hình @media và (độ rộng tối đa: 800px) {
  .product-wrapper {
    chiều rộng: calc(50% - 20px);
  }
  /* 2 sản phẩm liên tiếp */
}

Màn hình @media và (độ rộng tối đa: 600px) {
  .product-wrapper {
    chiều rộng: calc(100% - 20px);
  }
  /*1 sản phẩm liên tiếp*/
}

  

    

      
    

    

      Tiêu đề img0
    

  

  

    

      
    

    

      Tiêu đề img1
    

  

  

    

      
    

    

      Tiêu đề img2
    

  

  

    

      
    

    

      Tiêu đề img3
    

  

  

    

      
    

    

      Tiêu đề img4
    

  

  

    

      
    

    

      Tiêu đề img5
    

  

  

    

      
    

    

      Tiêu đề img6
    

  

  

    

      
    

    

      Tiêu đề img7
    

  

  

    

      
    

    

      Tiêu đề img8

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

Bạn có thể sử dụng hộp linh hoạt để kết thúc này.

chúng ta có thể thiết lậphiển thị: linh hoạtVà flex-wrap: bọchiện hữu #containerĐể bắt đầu, hãy đặt từng cái .product-wrapper Chiều rộng như bạn đã làm. Điều này sẽ đảm nhiệm việc thay đổi kích thước các gói sản phẩm theo hàng.

Sau đó chúng ta cũng có thể sử dụnghiển thị: linh hoạtcho mỗi .product-wrappermột lần nữa cho mỗi .product-img-wrapperChăm sóc nội dung tập trung trong mỗi gói sản phẩm.

Tính năng chúng tôi đang tận dụng ở đây là lề tự động của flexbox.

về cơ bản,hiển thị: linh hoạtvề cha mẹ lề:tự động trên phần tử con sẽ tự động căn giữa phần tử con theo chiều dọc và chiều ngang trong phần tử cha. Ngoài ra, bạn có thể căn chỉnh trẻ sang bên này hoặc bên kia bằng cách sử dụng lề tự động ở phía bên kia. Ví dụ: để căn chỉnh tiêu đề của chúng tôi với phần dưới cùng của phần tử gốc, chúng tôi sử dụng lề trên: tự động .nhưng vì chúng ta cũng muốn chúng được căn giữa theo chiều ngang nên chúng ta kết thúc bằng lề: tự động tự động 0 tự động. .

* {
  kích thước hộp: hộp viền;
}

#thùng chứa {
  hiển thị: linh hoạt;
  flex-wrap: bọc;
  chiều rộng: 100%;
}

.product-wrapper {
  hiển thị: linh hoạt;
  hướng linh hoạt: cột;
  lề: 10px;
  đường viền: 1px liền khối #DDD;
  chiều rộng: calc(20% - 20px);
}

.product-img-wrapper {
  /*hiển thị: flex;*/
  phần đệm: 10px;
  lề: tự động;
}

.product-img-wrapper img {
  /*lề: tự động;*/
  chiều rộng: 100%;
  chiều cao: tự động;
}

.product-title {
  hiển thị: khối;
  căn chỉnh văn bản: giữa;
  Họ phông chữ: Arial, sans-serif;
  lề: tự động tự động 0 tự động;
}

Màn hình @media và (độ rộng tối đa: 1200px) {
  .product-wrapper {
    chiều rộng: calc(25% - 20px);
  }
  /* 4 sản phẩm liên tiếp */
}

Màn hình @media và (độ rộng tối đa: 1000px) {
  .product-wrapper {
    chiều rộng: calc(33,33333% - 20px);
  }
  /*3 sản phẩm liên tiếp*/
}

Màn hình @media và (độ rộng tối đa: 800px) {
  .product-wrapper {
    chiều rộng: calc(50% - 20px);
  }
  /* 2 sản phẩm liên tiếp */
}

Màn hình @media và (độ rộng tối đa: 600px) {
  .product-wrapper {
    chiều rộng: calc(100% - 20px);
  }
  /*1 sản phẩm liên tiếp*/
}

  

    

      
    

    

      Tiêu đề img0
    

  

  

    

      
    

    

      Tiêu đề img1
    

  

  

    

      
    

    

      Tiêu đề img2
    

  

  

    

      
    

    

      Tiêu đề img3
    

  

  

    

      
    

    

      Tiêu đề img4
    

  

  

    

      
    

    

      Tiêu đề img5
    

  

  

    

      
    

    

      Tiêu đề img6
    

  

  

    

      
    

    

      Tiêu đề img7
    

  

  

    

      
    

    

      Tiêu đề img8


Về html - tạo các div có chiều cao bằng nhau dựa trên nội dung động mà không sử dụng javascript, 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/45596980/

25 4 0
Đề xuất bài viết: Làm cách nào để tắt chuyển đổi di chuột ban đầu khi gắn kết trong React?
Đề xuất bài viết: javascript - Phát tệp âm thanh bằng Redux
Đề xuất bài viết: html - các hộp chồng chéo
Đề xuất bài viết: PyQt: Bố cục bao quanh các tiện ích bên trong QScrollArea
Walker 123
Hồ sơ

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á taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
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