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

ul#menu3 li {
    color: #000000;
    float: left;
    /*I've done a little playing around here, doesn't seem to do anything*/
    position: relative;
    /*margin-bottom:-1px;*/

    line-height: 31px;
    width: 10em;
    padding: none;
    font-weight: bold;
    display: block;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-tile.gif);
}
.imgDivRt {
    width: 20px;
    height: 31px;
    display: inline;
    float: right;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-right.gif);
}
.imgDivLt {
    width: 20px;
    height: 31px;
    display: inline;
    float: left;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-left.gif);
}    

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

rất phù hợp để tiếp quản từ các bảng dưới dạng công cụ bố cục. Đây là một phần tử cấp khối được sử dụng để chia trang thành các phần logic và có thể giữ bất cứ thứ gì bạn cần bên trong nó. Bạn có thể có các khối văn bản trong div và sau đó đặt chúng lại với nhau trong một bố cục. Bạn có sự tự do to lớn, với khả năng thêm các khối này, hoặc các lớp, trên đỉnh của nhau. Kiểm tra ví dụ này.blocks of text in divs and then put them together in a layout. You have immense freedom, with the ability to add these blocks, or “layers”, on top of each other. Check out this example.

Thẻ div có một vài thuộc tính của riêng mình (lưu cho align="left | right | center"), với tất cả các định dạng của nó được áp dụng thông qua các kiểu dáng. Để thiết lập một khối điều hướng đơn giản, chúng tôi sẽ sử dụng mã như thế này (với CSS nằm trong tệp .CSS hoặc khối kiểu bên ngoài):all of its formatting applied through stylesheets. To set up a simple navigation block, we would use code like this (with the CSS being in an external .css file or style block):

Div#Điều hướng {chiều rộng: 200px; Bối cảnh: Xám; Đệm: 10px; } {width: 200px; background: gray; padding: 10px; }

Mã ví dụ này sử dụng một số mã CSS rất đơn giản. Tất cả các phần tử cấp khối có thể có thuộc tính chiều rộng, được chỉ định theo đơn vị hoặc theo tỷ lệ phần trăm, và sau đó tôi chỉ thêm một màu nền và một số không gian đệm xung quanh nội dung div.width property, specified in units or as a percentage, and then I just added a background colour and some padding space around the div content.

Các yếu tố nổi

Vì các bộ phận là cấp độ khối (nghĩa là, chúng mặc định là 100% chiều rộng màn hình có sẵn và thêm các đường ngắt đường giữa nhau), tất cả chúng sẽ chỉ xếp chồng lên nhau trừ khi bạn định vị chúng theo một cách nào đó. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính Float CSS, xương sống của hầu hết các bố cục CSS. Bạn có thể nổi bất kỳ phần tử nào bên trái hoặc phải, và nó sẽ tự căn chỉnh sang một bên của bất kỳ yếu tố nào nó được chứa bên trong.float property, the backbone of most CSS layouts. You can float any element left or right, and it will align itself over to the side of whatever element it is contained within.

#cột1 {float: trái; Chiều rộng: 200px; Đệm: 10px; }#cột2 {float: trái; Chiều rộng: 200px; Đệm: 20px; } {float: left; width: 200px; padding: 10px; }
#column2 {float: left; width: 200px; padding: 20px; }

Để tạo bố cục colum, bạn chỉ cần nổi tất cả các phân chia cột vào cùng một phía và chúng sẽ xếp hàng bên cạnh nhau, miễn là chúng phù hợp. Đặt nội dung theo cách này có những lợi ích ngay lập tức như tải xuống lũy ​​tiến (vì văn bản được tải nó được hiển thị trên trang ngay lập tức, vì vậy khách truy cập của bạn có thể đọc khi trang đang hình thành xung quanh văn bản). Bạn cũng có thể cung cấp cho mỗi lề và phần đệm cụ thể của cột, cho phép bạn tự do hơn để không gian nội dung của bạn. Dưới đây là một ví dụ về mã như CSS ở trên, với cả hai phần tử div được đưa ra phao: trái; tài sản:columned layouts, you simply float all of the column divisions to the same side and they will line up beside each other, as long as they fit. Laying out content in this way has immediate benefits such as progressive downloading (as the text is loaded it is displayed onto the page immediately, so your visitor can read as the page is forming around the text). You can also give each column specific margins and padding, giving you greater freedom to space your content out. Below is an example of code like the CSS above, with both div elements given the float: left; property:

Cột 1

Cột 2

Với các yếu tố nổi này, bạn có thể bắt chước cấu trúc bảng và có trang của bạn trong bố cục truyền thống mà không có tất cả các nhược điểm của bảng. Các yếu tố nổi mất một chút thực hành (đặc biệt là nếu các cột không có cùng chiều cao), nhưng có thể dẫn đến nhiều bố cục truyền thống và phi truyền thống. Nhưng CSS không phải là nội dung để chỉ mô phỏng các cơ chế bố cục của quá khứ - bây giờ bạn có thể kiểm soát vị trí của các phần tử trên trang xuống pixel.

Định vị CSS

Có hai loại định vị khác ngoài việc nổi: tuyệt đối và tương đối. Các mã bạn sẽ sử dụng làabsolute and relative. The codes you’ll be using are

Tag {vị trí: Lựa chọn; Top: 0px; Dưới cùng: 0px; Trái: 0px; Phải: 0px; } {position: choice; top: 0px; bottom: 0px; left: 0px; right: 0px; }

Lưu ý tương thích trình duyệt:

Định vị tuyệt đối và tương đối là một tính năng của đặc tả CSS2 và do đó được hỗ trợ bởi »Internet Explorer 4+,» Mozilla, »Firefox,» Opera và »Safari. Để có kết quả tốt nhất, hãy sử dụng các trình duyệt mới nhất có sẵn, vì chúng sẽ có khả năng kết xuất được cải thiện và chính xác hơn. Không sử dụng những thứ này nếu người dùng của bạn có thể sử dụng các trình duyệt cũ hơn.

Định vị tuyệt đối

Nếu bạn định vị một phần tử (một hình ảnh, bảng hoặc bất cứ điều gì) hoàn toàn trên trang của bạn, nó sẽ xuất hiện ở chính xác mà bạn chỉ định. Nói rằng tôi muốn một đồ họa xuất hiện 46 pixel từ đầu trang và 80 pixel từ bên phải, tôi có thể làm điều đó. Mã CSS mà bạn sẽ cần thêm vào hình ảnh là

img {vị trí: Tuyệt đối; Top: 46px; Phải: 80px; } {position: absolute; top: 46px; right: 80px; }

Bạn chỉ cần thêm phương pháp định vị mà bạn sử dụng khi bắt đầu, và sau đó đẩy hình ảnh ra khỏi các cạnh mà nó sẽ gần nhất. Bạn có thể thêm CSS trực tiếp vào thẻ bằng thuộc tính

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

0 (như được hiển thị trong phần Giới thiệu về bảng kiểu) hoặc bạn có thể sử dụng các lớp và ID và đặt chúng vào bảng kiểu của bạn. Nó hoạt động theo cùng một cách. Phương thức được đề xuất là thêm các lớp cho các thành phần bố cục sẽ xuất hiện trên mỗi trang, nhưng đặt mã nội tuyến cho những thứ một lần.

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

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

6 và tất cả các yếu tố trong đó sẽ được tập trung.text-align: center applied. So we can apply this property to the

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

6 element, and all the elements within it will be centered.

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.