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

jquery - Làm cách nào để ngăn các div bên trong của tôi trôi nổi xung quanh nhau

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 00:51:05 29 4
mua khóa gpt4 Nike

Tôi đã tạo một thẻ lật, nhưng tất cả các div trong thẻ dường như nổi chồng lên nhau. Tôi muốn các div ở cạnh nhau.

Tôi đã xem rất nhiều câu hỏi nhưng dường như không thể tìm thấy câu trả lời. Tôi đã thử nhiều display:inline;position:relative;floatleft;clear:both;nhưng dường như tôi không thể khiến các div ngồi cạnh nhau.

Có ai có thể tạo các div bên trong ("".putmenextTo") liền kề nhau không? 

.flipcardHold {
  margin: 10px;
  chiều cao: 30px;
  chiều rộng: 100px;
  position: relative;
  -phối cảnh webkit: 800px;
  -moz-phối cảnh: 800px;
  -o-phối cảnh: 800px;
  phối cảnh: 800px;
}

.card {
  width: 100%;
  chiều cao: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-chuyển tiếp: -moz-chuyển đổi 1s;
  -o-chuyển tiếp: -o-chuyển đổi 1s;
  chuyển đổi: chuyển đổi 1s;
  -webkit-transform-style: bảo quản-3d;
  -moz-transform-style: bảo quản-3d;
  -o-transform-style: bảo tồn-3d;
  kiểu biến đổi: bảo tồn-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  bán kính đường viền: 15px;
  display: block;
  chiều cao: 100%;
  width: 100%;
  chiều cao dòng: 26px;
  color: white;
  text-align: center;
  độ dày phông chữ: đậm;
  cỡ chữ: 10px;
  position: absolute;
  -webkit-backface-khả năng hiển thị: ẩn;
  -moz-backface-khả năng hiển thị: ẩn;
  -o-backface-khả năng hiển thị: ẩn;
  khả năng hiển thị mặt sau: ẩn;
}

.card .flipcardFront {
  background: red;
}

.card .flipcardBack {
  nền: màu xanh;
  -webkit-transform: xoayY(180deg);
  -moz-transform: xoayY(180deg);
  -o-transform: xoayY(180deg);
  biến đổi: xoayY(180deg);
}

.card.flipped {
  -webkit-transform: xoayY(180deg);
  -moz-transform: xoayY(180deg);
  -o-transform: xoayY(180deg);
  biến đổi: xoayY(180deg);
}

.putmenextTo {
  /*những thứ đã được thử rồi
    hiển thị:nội tuyến;
    vị trí: tương đối;
    nổi:trái;
    rõ ràng: cả hai;
    */
}




  

    

      
      
Mặt trước div đầu tiên

      
Mặt trước div thứ hai

      
div mặt trước thứ ba

    

    

      
      
Quay lại div đầu tiên

      
Quay lại div thứ hai

      
Quay lại div thứ ba

    

  






  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });

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

sử dụng nổi: trái, trên div bên trong sử dụng cụ thể width và sẽ chiều rộng: 300px từ chiều rộng: 100px Thay đổi thành chiều rộng: 300px > bên cạnh nhau và sẽ vị trí: tuyệt đối Thay đổi thành liên quan đến

.flipcardHold {
  margin: 10px;
  chiều cao: 30px;
  chiều rộng: 300px;
  position: relative;
  -phối cảnh webkit: 800px;
  -moz-phối cảnh: 800px;
  -o-phối cảnh: 800px;
  phối cảnh: 800px;
}

.card {
  width: 100%;
  chiều cao: 100%;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  -moz-chuyển tiếp: -moz-chuyển đổi 1s;
  -o-chuyển tiếp: -o-chuyển đổi 1s;
  chuyển đổi: chuyển đổi 1s;
  -webkit-transform-style: bảo quản-3d;
  -moz-transform-style: bảo quản-3d;
  -o-transform-style: bảo tồn-3d;
  kiểu biến đổi: bảo tồn-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div.flipcardFront,.card div.flipcardBack{
  chiều rộng: 100%;
}

.card div {
  bán kính đường viền: 15px;
  nổi:trái;
  chiều cao: tự động;
  chiều rộng: 100px;
  chiều cao dòng: 26px;
  color: white;
  text-align: center;
  độ dày phông chữ: đậm;
  cỡ chữ: 10px;
  vị trí: tương đối;/*đã thay đổi*/
  -webkit-backface-khả năng hiển thị: ẩn;
  -moz-backface-khả năng hiển thị: ẩn;
  -o-backface-khả năng hiển thị: ẩn;
  khả năng hiển thị mặt sau: ẩn;
}

.card .flipcardFront {
  background: red;
}

.card .flipcardBack {
  nền: màu xanh;
  -webkit-transform: xoayY(180deg);
  -moz-transform: xoayY(180deg);
  -o-transform: xoayY(180deg);
  biến đổi: xoayY(180deg);
  vị trí: tuyệt đối;
  trên cùng:0px;
}

.card.flipped {
  -webkit-transform: xoayY(180deg);
  -moz-transform: xoayY(180deg);
  -o-transform: xoayY(180deg);
  biến đổi: xoayY(180deg);
}

.putmenextTo {
  /*những thứ đã được thử rồi
    hiển thị:nội tuyến;
    vị trí: tương đối;
    nổi:trái;
    rõ ràng: cả hai;
    */
}




  

    

      
      
Mặt trước div đầu tiên

      
Mặt trước div thứ hai

      
div mặt trước thứ ba

    

    

      
      
Quay lại div đầu tiên

      
Quay lại div thứ hai

      
Quay lại div thứ ba

    

  






  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });

Về jquery - Làm cách nào để ngăn các div bên trong của tôi trôi nổi xung quanh nhau, 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/55899354/

29 4 0
Bài viết khuyến nghị: Python - Giải nén cấu trúc byte thành các ký tự ascii nhưng có dấu
Bài viết khuyến nghị: Xlsxwriter: Có thể tạo văn bản dọc ngôn ngữ Đông Á trên một ô không?
Bài viết khuyến nghị: python - Tăng tốc độ đọc file nhị phân
Bài viết khuyến nghị: javascript - menu thả xuống không cho phép tôi nhấp vào mục menu của mình
không gian vũ trụ
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