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

html - nút bên ngoài flexbox của anh ấy

In lại Tác giả: Walker 123 Thời gian cập nhật: 28-11-2023 00:43:50 26 4
mua khóa gpt4 Nike

Xin chào, tôi đã rụng một nửa tóc sau hai ngày, xin lỗi vì tiếng Anh của tôi :)

Nếu bạn thay đổi kích thước cửa sổ,Nút trong #header sẽ vượt quá vùng chứa của nó.

Mã này như sau:

#gốc {
  nền: màu xám;
  
  hiển thị: linh hoạt;
  hướng linh hoạt: cột;
  căn chỉnh các mục: giữa;
}

#tiêu đề {
  nền: màu đỏ;
  
  căn chỉnh-tự: kéo dài; /* điền vào trục chính */
  flex: 0 0 65px; /* chiều cao cố định */
  
  hiển thị: linh hoạt;
  biện minh-nội dung: khoảng cách giữa;
  căn chỉnh các mục: giữa;
  
  phần đệm: 10px;
}

  

    
    
  

  <------ thay đổi kích thước của tôi ---->

Tôi nghĩ vấn đề là#root.width được dẫn dắt bởi window/body.width ?

tôi có một cáinội dung tối thiểuGiải pháp:#root { chiều rộng tối thiểu: nội dung tối thiểu ... }, nhưng tôi không muốn sử dụng giá trị này.

Làm cách nào để định cấu hình đúng cách #root làm vùng chứa tốt và đẹp cho bố cục của tôi?

Đây là một codepen để phát lại:https://codepen.io/papawa/pen/NLKbKR

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

Không vấn đề gì, đó là một kết quả hợp lý, trừ khi bạn quyết định xem mình muốn gì trên màn hình nhỏ hơn thì đây là thứ bạn sẽ nhận được, lý do là bạn có một nút có "văn bản một từ" dài để giải quyết vấn đề này Cách thực hiện đó là để bao bọc văn bản, đây là cách bạn thực hiện:

tràn-quấn: break-word;

hoặc

word-wrap: ngắt từ;

Kết quả chung cuộc như sau:

 #gốc {
      hiển thị:flex;
      hướng linh hoạt: cột;
      căn chỉnh các mục:giữa;
      nền: màu xám;
      tràn:ẩn;

    }

    #tiêu đề {
      căn chỉnh-tự:căng;
      linh hoạt: 0 0 65px;
      
      hiển thị: linh hoạt;
      biện minh-nội dung: khoảng cách giữa;
      căn chỉnh các mục: giữa;
      
      nền: màu đỏ;
      phần đệm: 10px;
}
.btn{
  chiều rộng: 50vw;
  
  /* Về mặt kỹ thuật thì giống nhau nhưng sử dụng cả hai */
  tràn-quấn: break-word;
  word-wrap: ngắt từ;
}

  

    
    
  

  <---- thay đổi kích thước của tôi ---->

Đọc thêm:Xử lý các từ và URL dài (Buộc ngắt, gạch nối, dấu chấm lửng, v.v.)

Về các nút html - bên ngoài flexbox của anh ấy, 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/51919316/

26 4 0
Đề xuất bài viết: Chi tiết về C++ boost::shared_ptr operator[]
Đề xuất bài viết: Lớp HttpListener trong C++?
Đề xuất bài viết: Tôi đang cố gắng thụt lề nút đăng nhập thanh điều hướng theo chiều ngang
Đề xuất bài viết: Có thể sử dụng độ rộng đường viền động trong công cụ quay vòng phản hồi tương ứng với phần tử gốc trong css không?
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