Hướng dẫn css keep div together - css giữ div với nhau

• Sub 1
• Sub 2
• Sub 3
• Sub 4
• Sub 5
• Sub 6

Hình ảnh sẽ xuất hiện như vậy. Như bạn có thể thấy, có thể có những thứ chồng chéo với định vị tuyệt đối.overlapping with absolute positioning.

Lớp định vị

Để tạo những gì chúng ta gọi là các lớp với thẻ div, hãy sử dụng mã như sau:layers with the div tag, use code like this:

Option 1


    
Sub 1

        

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

        
    
    
Sub 2
 
    

            
Sub 1

            
Sub 2
 
            
Sub 3

            
Sub 4

            
Sub 5

            
Sub 6

        
    
    
Sub 3

    
Sub 4

    
Sub 5

    
Sub 6



Option 2

Đầu tiên bạn chỉ định vị trí của lớp, sau đó kích thước của nó [là tùy chọn, lớp sẽ tự thay đổi kích thước]. Nếu bạn muốn đưa màu cho nền lớp, hãy thêm màu nền: màu đỏ; thuộc tính với phần còn lại của mã CSS của bạn. Như thường lệ, bạn có thể sử dụng Websafe Colors hoặc màu sắc được đặt tên.position of the layer, then its dimensions [which is optional, the layer will resize itself]. If you want to give colour to the layer’s background, add the background-color: red; attribute in with the rest of your CSS code. As usual, you can use websafe colours, or named colours.

Bất cứ điều gì có thể đi trên một trang bình thường đều có thể được định vị với divs. Họ tải nhanh hơn nhiều so với bố cục bảng. Các bảng không hiển thị trên màn hình cho đến khi chúng được tải xuống toàn bộ. Với các lớp, tất cả thông tin mà một trình duyệt cần được chứa trong các thuộc tính kiểu mà bạn đã thêm. Do đó, nó sẽ hiển thị ngay khi bất kỳ phần nào của nó được tải xuống.load far faster than, say, a table layout. Tables do not display on-screen until they have been downloaded in their entirety. With layers, all the information a browser needs is contained in the style attributes you’ve added. Therefore, it will display as soon as any part of it is downloaded.

Để có được các lớp chồng chéo lẫn nhau, bạn cần sử dụng lệnh z-index. Thêm z-index: 1 in với mã định vị và phần tử này sẽ xuất hiện trên mọi thứ mà không cần lệnh này. Nếu bạn cũng muốn một cái gì đó khác đi qua lớp này, hãy thêm Z-index: 2 và cứ thế. Chỉ số càng cao, div sẽ xuất hiện ở phía trước của trang càng gần.overlapping each other you need to use the z-index command. Add z-index: 1 in with the positioning code and this element will appear above everything without this command. If you want something else to go over this layer too, add z-index: 2 and so on. The higher the index, the closer the div will appear to the front of the page.

Đặt lớp giữ nội dung trang của bạn ở đầu mã của bạn. Đây là những gì độc giả muốn xem ngay lập tức. Điều hướng của bạn và các thành phần trình bày khác sau đó có thể tải xung quanh điều này, cho phép người đọc của bạn bắt đầu đọc càng sớm càng tốt và cung cấp điều hướng của bạn khi nó được sử dụng nhiều nhất: sau khi trang được đọc.content at the top of your code. This is what readers want to see immediately. Your navigation and other presentational components can then load around this, allowing your reader to begin reading as soon as possible and making your navigation available when it is most likely to be used: after the page has been read.

Để xem một số ví dụ về các thiết kế được đặt ra với cả vị trí nổi và định vị tuyệt đối, hãy xem xét ở phần thiết kế lại của tôi.float and absolute positioning, have a look-see at my redesigns section.

Định vị tương đối

Khi bạn định vị một cái gì đó tương đối, bạn đang sửa đổi vị trí của nó từ nơi nó sẽ xảy ra nếu bạn đã thay đổi bất cứ điều gì. Tôi thấy rằng đó là cách dễ nghĩ nhất về nó. Chẳng hạn, trong câu tiếp theo, tôi sẽ bù một số từ 12px xuống và 22px phải liên quan đến vị trí bắt đầu của chúng.

Vâng, đây là một số từ [một số từ]some words [some words]

Các từ trong ngoặc đơn là các từ ở vị trí ban đầu của chúng, và những từ táo bạo là những từ được chuyển động. Mã CSS để di chuyển chúng là

một vài từrelative;top:12px;left:22px;">some words

Bạn nên chú ý rằng nếu bạn muốn di chuyển một cái gì đó bên trái, bạn sử dụng đúng mã và đẩy nó ra khỏi phía đó và ngược lại.right code, and push it away from that side and vice-versa.

Để ghi đè một thuộc tính vị trí kế thừa và làm cho phần tử chỉ là một phần bình thường của trang một lần nữa, đặt nó thành vị trí: tĩnh.position property, and make the element just a normal part of the page again, set it to position: static.

Định tâm ngang

Tập trung vào div hoặc bất kỳ phần tử cấp khối nào khác theo chiều ngang là một trường hợp đặc biệt cho bố cục CSS, thậm chí là có một lỗi trong việc triển khai Internet Explorer về cách thực hiện tiêu chuẩn. Cách tiêu chuẩn là đặt các giá trị lề ngang của phần tử thành tự động, như vậy:margin values to auto, like so:

#Wrapper {Width: 760px; Biên độ: 0 tự động; } {width: 760px; margin: 0 auto; }

Điều đó sẽ hoạt động trong các trình duyệt như Firefox, Safari hoặc Opera. Tuy nhiên, điều này sẽ không có tác dụng trong các phiên bản của Internet Explorer bên dưới 7. Có một bản hack mà chúng tôi có thể sử dụng mặc dù, để chúng tôi có được định tâm ngang trong tất cả các trình duyệt. Đối với Whit, tức là các phần tử cấp độ khối không chính xác nếu phần tử mà chúng chứa trong có văn bản-Align: trung tâm được áp dụng. Vì vậy, chúng tôi có thể áp dụng thuộc tính này cho phần tử

Option 1


    
Sub 1

        

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

        
    
    
Sub 2
 
    

            
Sub 1

            
Sub 2
 
            
Sub 3

            
Sub 4

            
Sub 5

            
Sub 6

        
    
    
Sub 3

    
Sub 4

    
Sub 5

    
Sub 6



Option 2

Option 1


    
Sub 1

        

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

            
Sandwich

        
    
    
Sub 2
 
    

            
Sub 1

            
Sub 2
 
            
Sub 3

            
Sub 4

            
Sub 5

            
Sub 6

        
    
    
Sub 3

    
Sub 4

    
Sub 5

    
Sub 6



Option 2

Body {Text-Align: Center;} {text-align: center; }

Một bước cuối cùng là cần thiết.Tất nhiên, dòng trên sẽ làm trung tâm tất cả các văn bản bên trong các phần tử trung tâm, thường không phải là những gì chúng ta muốn, vì vậy chúng ta cần sắp xếp văn bản bên trong bên trái.Vì vậy, ở đây, tất cả các mã:

Body {Text-Align: Center;} #Wrapper {Width: 760px;Biên độ: 0 tự động;Văn bản-Align: Trái;} {text-align: center; }
#wrapper {width: 760px; margin: 0 auto; text-align: left; }

Dễ dàng khi bạn biết làm thế nào, hả?Hãy cẩn thận nếu bạn có kế hoạch trộn định vị tuyệt đối và phương pháp định tâm này trong cùng một bố cục.Nếu bạn muốn các yếu tố khác được định vị hoàn toàn bên trong trình bao bọc, hãy làm cho nó tương đối định vị trước.

#Wrapper {vị trí: tương đối;Chiều rộng: 760px;Biên độ: 0 tự động;Văn bản-Align: Trái;} {position: relative; width: 760px; margin: 0 auto; text-align: left; }

Điều này sẽ tạo ra một yếu tố bên trong mà bạn hoàn toàn định vị tại, ví dụ, TOP: 0;Trái: 0;Xuất hiện ở góc trên cùng bên trái của trình bao bọc, và không phải ở trên cùng bên trái của toàn bộ cửa sổ.top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window.

Dừng tiếp theo: Thêm biên giới vào các yếu tố của bạn.