Bài học CSS Float

Thảo luận trong 'Lập trình Html/Css' bắt đầu bởi n_erudite, 16/1/16.

Đã xem: 7,570

  1. n_erudite Thành Viên

    Như một ví dụ về cột nổi, có một cái nhìn vào hình ảnh dưới đây được lấy từ một trình duyệt:

    [​IMG]

    Vì vậy, chúng ta có hai cột của văn bản side-by-side. Người đầu tiên có nền màu xám, do đó bạn có thể nhìn thấy cột tốt hơn. Nó cũng có một tỷ suất lợi nhuận 10 pixel. Dưới đây là CSS:

    [​IMG]
    >>Khóa hoc php cơ bản nâng cao tại hà nội !

    And here's the HTML:

    [​IMG]

    Đối với HTML, chúng tôi đã chỉ được sử dụng các thẻ DIV cho hai đoạn văn bản. Đoạn đầu có lớp CSS áp dụng cho nó.
    Chú ý hai điều về mã CSS, mặc dù. Điều đầu tiên cần chú ý đó là chúng ta đã sử dụng float: left. Điều thứ hai cần ghi nhận là chúng tôi đã thiết lập một chiều rộng cho các cột của 200 pixels. Nếu bạn không đặt một chiều rộng sau đó bất kỳ văn bản mà bạn có cho cột của bạn chỉ đơn giản là sẽ chảy từ trái sang phải.

    Có một vấn đề với cách tiếp cận của chúng tôi, tuy nhiên. Có một cái nhìn tại các cột trong các trình duyệt một lần nữa. Mặc dù họ nhìn độc đáo side-by-side, đây chỉ là vì chúng ta thao tác trình duyệt. Chúng tôi cố tình làm cho nó nhỏ hơn để các văn bản điều chỉnh kích thước của chính nó. Nếu chúng ta làm cho trình duyệt lớn hơn, đây là những gì sẽ xảy ra:
    [​IMG]
    >> khoa hoc lap trinh android cơ bản nâng cao tại hà nội!


    Các văn bản trong cột thứ hai sẽ kéo dài từ trái sang phải để lấp đầy không gian có sẵn.
    Để ngăn chặn nó làm điều đó, bạn có thể thêm các lớp học để các DIV thứ hai, cũng như:
    [​IMG]

    Bây giờ cả hai đoạn văn bản được lưu hành trái, và có chiều rộng 200 pixel. Các trình duyệt có thể được thay đổi kích cỡ và hai cột sẽ ở lại tại chỗ.
    Để bắt đầu văn bản trên một dòng mới bên dưới các cột, bạn có thể sử dụng tài sản rõ ràng trong CSS, hãy nhớ:

    Mã:
    .clear {
    
    clear: left;
    
    }
    Điều này sẽ xóa các giá trị float và trở lại bình thường, dòng chảy tĩnh. (Bạn có thể thay thế cho trái với quyền hoặc cả hai tùy thuộc vào nhu cầu của bạn.)
    >>Khóa học photoshop cơ bản nâng cao tại hà nội !
     
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook