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

Vị trí div CSS

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

Đầu tiên xin trích dẫn hình ảnh dưới đây:nhập mô tả hình ảnh ở đây

Về cơ bản đây là ý tưởng của tôi về bố cục.

Điều tôi muốn là:

  • Div nội dung trở thành "trọng tâm chính", ví dụ như khi trình duyệt
    Thay đổi kích thước và nó sẽ ở giữa;
  • Khi trình duyệt được thay đổi kích thước, tôi muốn hai hình ảnh này về cơ bản
    Nằm bên dưới div nội dung. (Không hoàn toàn chắc chắn về cách giải thích điều này
    Điều này, nhưng tôi hy vọng bạn hiểu);
  • Có thể (và sẽ) xảy ra trường hợp trình duyệt nhỏ hơn
    1400px (200 + 1000 + 200), trong trường hợp này tôi muốn hình ảnh bên trái
    Dán càng nhiều càng tốt ở bên trái, tương tự với hình ảnh bên phải
    Giữ bên phải càng nhiều càng tốt;
  • Tôi cũng không muốn thanh cuộn bên xuất hiện khi trình duyệt đang chạy
    Thay đổi kích thước. (Hay đúng hơn là chiều rộng nhỏ hơn 1400 pixel).

    • Đây là tất cả những yêu cầu tôi có thể nghĩ ra ngay bây giờ.

    Tôi đã sử dụng nhiều phương pháp khác nhau để tìm nội dung css và loay hoay trong css hàng giờ nhưng chưa bao giờ đạt được hiệu quả như mong muốn. Tôi đã rất gần với giải pháp một vài lần nhưng chỉ bỏ lỡ một phần tử CSS hoặc thứ gì đó, điều này không phải là không thể. Hãy thử sử dụng chỉ mục z, float và một số thứ khác.

    Có ai có thể giúp tôi được không?

    Cảm ơn trước.

    Ví dụ mã:

    CSS: 
    #hình nền {
        overflow:hidden;
        chiều cao: 1000px;
    }

    #imageleft{
        nổi:trái;
        nền: url(homebg.png);
        chiều cao: 1000px;
        chiều rộng: 445px;
    }


    #hình ảnh bên phải{
        nền: url(homebg2.png);
        nổi:đúng;
        chiều cao: 1000px;
        chiều rộng: 445px;
    }


    #nội dung trung gian {
        nổi:trái;
        tràn:có thể nhìn thấy;
        chiều cao: 1000px;
        chiều rộng: 1000px;
        lề trái: tự động;
        màu nền: đỏ;
    }

    HTML:



    Ví dụ: điều này trông rất gần với những gì tôi muốn thực hiện, nhưng trước tiên, div nội dung không được căn giữa và bất cứ khi nào tôi thay đổi kích thước, nó vẫn tập trung vào hình ảnh bên trái.

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

    Đây là những gì tôi làm...Tôi không nói đây là giải pháp tốt nhất. Tôi cảm thấy khả năng hỗ trợ cho các truy vấn phương tiện CSS vẫn chưa đủ tốt, vì vậy tôi đã tổng hợp một chút jQuery để giúp tôi... http://jsfiddle.net/ZdR8P/

    BTW, tôi không phải là lập trình viên jQuery giỏi nhất, vì vậy có thể có nhiều cách tốt hơn để đạt được kết quả tương tự (luôn hoan nghênh phản hồi từ các lập trình viên jQuery giỏi hơn!)

    Đây là HTML


        
    Nội dung ở đây

        
    Nội dung ở đây

        
    Nội dung ở đây

    Xem sitemap của VNExpress

    jQuery 
    $(document).ready(function(){

    var reportWidth = true;

    nếu (báo cáoWidth){
        $('body').append('
    '); 
        $('#reportWidth').css({
            vị trí:'cố định',
            đáy: 0,
            trái: 0,
            đúng:0,
            màu nền:'#666666',
            màu sắc:'#ffffff'
        })
    }

        var breakpoint=mảng mới();
        breakpoint.push(320); // iPhone 4 & 5 ở chế độ dọc
        breakpoint.push(480); // iPhone 4 ở chế độ ngang
        breakpoint.push(568); // iPhone 5 ở chế độ ngang
        breakpoint.push(768); // iPad ở chế độ dọc
        detectViewportWidth(breakpoint,reportWidth);
        $(window).resize(function(){
        detectViewportWidth(breakpoint,reportWidth)
        });
    });

    hàm detectViewportWidth(breakpoint,reportWidth){
        var htmlClassPrefix='pageWidth-';
        var currentWidth=$(window).width();
        var noBreakpoints=breakpoint.length;
        var widthClass=noBreakpoints+'-'+(noBreakpoints+1);
        $('html').removeClass(htmlClassPrefix+widthClass);
        var previousArrayVal=0;
        $.each(breakpoint,function(arrayKey,arrayVal){
            $('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1));
            if (currentWidth<=arrayVal && currentWidth>previousArrayVal){
                widthClass=arrayKey+'-'+(arrayKey+1);
            }
            trướcArrayVal=arrayVal;
        });
        $('html').addClass(htmlClassPrefix+widthClass);
        nếu (báo cáoWidth){
            $('#reportWidth').text(htmlClassPrefix+widthClass); 
        }
    }

    và CSS: 
    div {
        đường viền:1px liền khối #999999;
        hiển thị: khối nội tuyến;
        chiều rộng: 29%;
        ký quỹ: 0 1%;
    }
    .pageWidth-0-1 div,
    .pageWidth-1-2 div
    {
        display:block;
        chiều rộng: 98%;
    }

    Về cơ bản những gì nó làm là phát hiện chiều rộng của khung nhìn và áp dụng một lớp cho thẻ nội dung dọc theo dòng .pageWidth-2-3. Nếu bạn thay đổi kích thước của Ngăn, bạn sẽ thấy thanh trạng thái nhỏ ở phía dưới thay đổi tương ứng. .pageWidth-0-1 là hẹp nhất và .pageWidt-4-5 là rộng nhất (nhưng về mặt lý thuyết bạn có thể đặt bao nhiêu phân vùng - hoặc "điểm dừng" - trong jQuery).

    Sau đó, đặt bố cục mặc định trong CSS của bạn - bạn có thể muốn bố cục mặc định là bố cục ba cột bình thường, như tôi trình bày trong phần fiddle - điều này giả định rằng hầu hết khách truy cập của bạn sẽ xem trên màn hình bình thường.. . Ví dụ.

    Sau đó, bạn có thể xác định hành vi kiểu cụ thể khi khung nhìn trở nên nhỏ hơn. Hy vọng bạn có thể thấy rằng trong CSS của tôi, tôi đã thiết lập bố cục ba cột cơ bản để khi div trở thành toàn bộ chiều rộng và khối, pageWidth sẽ bị ghi đè khi nó là .pageWidth-0-1 hoặc .pageWidth-1-2 .

    Hãy thử thay đổi độ rộng của Ngăn trong fiddle và khi nó đủ hẹp, bạn sẽ thấy các div rơi vào các cột dọc.

    Hy vọng điều này mang lại cho bạn một điểm khởi đầu?

    Về vị trí CSS div, 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/16604940/

    28 4 0
    Bài viết khuyến nghị: Làm cách nào để thêm thuộc tính vào khung dữ liệu Pandas được lưu trữ dưới dạng nhóm trong tệp HDF5?
    Bài viết khuyến nghị: c - Làm thế nào để thay thế độ trễ() bằng millis()?
    Bài viết khuyến nghị: c - Lập lịch truyền khung trong RTOS
    Bài viết khuyến nghị: mysql - Quá nhiều TIME_WAIT từ 127.0.0.1
    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