Hướng dẫn css ignore parent width - css bỏ qua chiều rộng mẹ

Một ví dụ về mã của tôi:

Kiểm tra liên kết này https://jsfiddle.net/b5woxesg/

Explaining:

Nội dung của trang web của tôi được đặt như thế này để giữ bản thân ở trung tâm của trang. Với width: tính bằng % và max-width: trong px để không strech. Nội dung này được gọi từ một tệp đánh dấu, vì tôi đang sử dụng Jekyll.

Những gì tôi muốn làm là: Bất cứ khi nào tôi gọi {% highlight %}in trong tệp MD, khối mã được tạo nên với width: 100% nhưng bỏ qua giới hạn chiều rộng của cha mẹ. Ý tôi là 100% toàn bộ trang. Ngoài ra, văn bản bên trong nên giữ liên kết với nội dung trang. Một cái gì đó như vậy:

Hướng dẫn css ignore parent width - css bỏ qua chiều rộng mẹ

Nhưng div nổi bật là bên trong nội dung với đường viền màu xanh.

Tôi tin rằng không có cách nào để làm điều này mà không thay đổi cấu trúc hiện tại, tôi không có vấn đề gì với điều đó, nhưng vì tôi đang sử dụng tệp MD, một số thay đổi có thể bị hạn chế.

@Edit: Giải pháp:

Cảm ơn tất cả các bạn đã giúp đỡ.

Tôi đã sử dụng đầu @MD Ashik và cải thiện nó bằng mã jQuery dễ dàng để lưu .Highlight height (vì tôi đang sử dụng height: auto chiều cao có thể là bất kỳ số nào). Sau đó, tôi đã tạo một div class="space" bên cạnh ánh đèn., Chỉ được sử dụng để lấp đầy khoảng trống trong nội dung. Vì vậy, tôi đặt div .space với chính xác height của .Highlight

Kiểm tra xem: https://jsfiddle.net/b5woxesg/7/

Ngày 22 tháng 8 năm 2020 lúc 12:26 PM #1414161 Forums Support Child div ignore parent div to go full wide

  • TomDavid.

Vì vậy, đây là một mẫu tôi có sửa đổi tệp mẫu trực tiếp hoặc với trình tùy chỉnh hoặc một phương thức móc không? Nó có thể chỉ ảnh hưởng đến mẫu này và rời khỏi các khu vực trang web khác

  • Matthew

    Tôi có ý tưởng về điều này, âm thanh hứa hẹn.

  • Vì vậy, đây là một mẫu tôi có sửa đổi tệp mẫu trực tiếp hoặc với trình tùy chỉnh hoặc một phương thức móc không? Nó có thể chỉ ảnh hưởng đến mẫu này và rời khỏi các khu vực trang web khác #1413593

    Hướng dẫn css ignore parent width - css bỏ qua chiều rộng mẹ
    Matthew

    Tôi có ý tưởng về điều này, âm thanh hứa hẹn.

    Vì vậy, đây là một mẫu tôi có sửa đổi tệp mẫu trực tiếp hoặc với trình tùy chỉnh hoặc một phương thức móc không? Nó có thể chỉ ảnh hưởng đến mẫu này và rời khỏi các khu vực trang web khác

    Mẫu tôi đã tạo có div từ max-width:2, cùng với max-width:3 và article, v.v.

    Đây có phải là một ý tưởng tồi. Bất kỳ suy nghĩ hoặc khuyến nghị?

    thanks,

    Ngày 22 tháng 8 năm 2020 lúc 7:03 sáng #1413759 #1413759

    David

    Nhân Viên

    Hỗ trợ khách hàng

    Chào bạn,

    Phương pháp tốt nhất là đặt container trang thành chiều rộng đầy đủ. Sau đó, bạn có thể tạo nội dung chứa bằng cách gói chúng trong một bộ đệm lưới max-width:1
    Then you can created contained content by wrapping them in a grid-container max-width:1

    Và bất kỳ yếu tố nào khác sẽ chỉ lấp đầy toàn bộ chiều rộng.

    Nếu bạn sử dụng trình chỉnh sửa khối thì plugin GenerateBlocks của chúng tôi sẽ cho phép bạn tạo các thùng chứa chứa và chiều rộng đầy đủ mà không cần HTML 🙂

    Ngày 22 tháng 8 năm 2020 lúc 7:19 sáng #1413784 #1413784

    Matthew

    Tôi có ý tưởng về điều này, âm thanh hứa hẹn.

    Vì vậy, đây là một mẫu tôi có sửa đổi tệp mẫu trực tiếp hoặc với trình tùy chỉnh hoặc một phương thức móc không? Nó có thể chỉ ảnh hưởng đến mẫu này và rời khỏi các khu vực trang web khác

    Mẫu tôi đã tạo có div từ max-width:2, cùng với max-width:3 và article, v.v.

    Ngày 22 tháng 8 năm 2020 lúc 12:26 PM #1414161 #1414161

    Tom

    Nhà phát triển chính

    Nhà phát triển chính

    Bạn đang thêm bộ sưu tập vào tệp mẫu, hoặc bạn đang sử dụng trình soạn thảo?

    Ngày 23 tháng 8 năm 2020 lúc 10:15 PM #1415479 #1415479

    Matthew

    Xin chào Tom Yep, mã phòng trưng bày được thêm vào trong mẫu.

    Thư viện chứa: https://drive.google.com/file/d/15bth0eijdvdh-qxnlxe4jmaejtm2Ampl/view?usp=shared
    https://drive.google.com/file/d/15bTh0EijdVdh-qxNlXe4JmAejtm2aMpL/view?usp=sharing

    Bộ sưu tập rộng: (tức là mô phỏng sử dụng max-width:5) https://drive.google.com/file/d/1mvg95bpyecfkvp_id1yqzjtcv8il8vsu/view?usp=Shared
    https://drive.google.com/file/d/1MvG95BPyecFKvP_iD1yqZjTcV8IL8Vsu/view?usp=sharing

    Kéo dài đến chiều rộng đầy đủ sẽ là tuyệt vời như bạn có thể thấy trong trường hợp có nhiều hình thu nhỏ của bộ sưu tập. Tôi hy vọng người dùng cũng kiểm soát tính năng này.

    Div chứa bộ sưu tập MLA nằm trong article Div. Như hầu hết các div khác trong bố cục mẫu tổng thể của tôi.

    Ngày 24 tháng 8 năm 2020 lúc 5:17 sáng #1415883 #1415883

    David

    Nhân Viên

    Hỗ trợ khách hàng

    Bạn có thể chia sẻ một liên kết đến trang nơi chúng ta có thể xem bộ sưu tập tại chỗ. Có thể tùy chọn CSS đơn giản hơn nếu không yêu cầu tước độ rộng của container từ mẫu - và sau đó gói nội dung chứa bên trong của bạn
    Maybe a CSS option is simpler… if not it would require stripping the container width from the template – and then wrapping your contained content inside ‘contained’ max-width:7s

    Ngày 24 tháng 8 năm 2020 lúc 9:18 PM #1416912 #1416912

    Matthew

    Cảm ơn David, đã gửi qua biểu mẫu sự cố tài khoản của bạn với mật khẩu trình cắm Hidemysite.

    Để tóm tắt, điều này cuối cùng sẽ là tính năng chuyển đổi người dùng, tức là Div sẽ có thể được cả hai và rộng dựa trên điều khiển người dùng (mặt trước).

    Ngày 25 tháng 8 năm 2020 lúc 7:06 AM #1417415 #1417415

    David

    Nhân Viên

    Hỗ trợ khách hàng

    Bạn có thể chia sẻ một liên kết đến trang nơi chúng ta có thể xem bộ sưu tập tại chỗ. Có thể tùy chọn CSS đơn giản hơn nếu không yêu cầu tước độ rộng của container từ mẫu - và sau đó gói nội dung chứa bên trong của bạn

    Ngày 24 tháng 8 năm 2020 lúc 9:18 PM #1416912

    max-width:9

    Cảm ơn David, đã gửi qua biểu mẫu sự cố tài khoản của bạn với mật khẩu trình cắm Hidemysite.
    To make the entire content fullwidth.

    Để tóm tắt, điều này cuối cùng sẽ là tính năng chuyển đổi người dùng, tức là Div sẽ có thể được cả hai và rộng dựa trên điều khiển người dùng (mặt trước).

    Ngày 25 tháng 8 năm 2020 lúc 7:06 AM #1417415

  • Ok vậy suy nghĩ là điều này.

    1. Hiện tại, container max-width:8 đang điều khiển chiều rộng bằng cách sử dụng đánh dấu này:

2. Bạn có thể xóa các lớp {% highlight %}0 khỏi phần tử đó để tạo toàn bộ nội dung FullWidth.

  • 3. Sau đó áp dụng lớp Container lưới cho các thùng chứa khác nhau trong nội dung của bạn.