Bố cục lát bằng CSS và HTML

Question

Không dựa vào bảng, giải pháp tốt để hoàn thành bố cục lát như thế này: tự động điều chỉnh kích thước màn hình của người dùng. Đó là, toàn bộ màn hình sẽ được lấp đầy bởi các viên gạch, bất kể với và chiều cao của độ phân giải.

Tôi đánh giá cao bất kỳ ý tưởng nào.

~ Robert

Answer 1

Dưới đây là một ví dụ làm việc: jsfiddle

Html:

<div class="container"> 
<div class="first">first</div><div class="third">third</div> 
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div> 
</div>​ 

CSS:

html, body, .container 
{ 
    height: 100%; 
    min-height: 100%; 
} 

.first { 
    float: left; 
    width: 20%; 
    height: 30%; 
    background-color: red; 
} 

.second{ 
    float: left; 
    width: 20%; 
    height: 70%; 
    background-color: green; 
} 


.third{ 
    float: right; 
    width: 80%; 
    height: 80%; 
    background-color: blue; 
} 

.fourth { 
    float: right; 
    width: 40%; 
    height: 20%; 
    background-color: #DDDDDD; 
} 

.last{ 
    float: right; 
    width: 40%; 
    height: 20%; 
    background-color: yellow; 
} 

Answer 2

tôi sẽ đi với một số div sử dụng absolute positionning. Và chỉ định cho từng lát chiều rộng/chiều cao/trên cùng/trái bằng cách sử dụng đơn vị %.

Answer 3

Gợi ý:

• Sử dụng một "nội dung div" với 100% width và height
• Sử dụng vào "nội dung div" hai divs: một cho cột bên trái và một cho một trong những quyền. Hãy nhớ để cung cấp cho những "%" kích thước (để "nội dung" DIV cũng)
• Hãy nhớ rằng một nổi đúng div phải đến TRƯỚC một trái nổi div

Với ba điểm này, bạn nên có thể tự mình thử.

Answer 4

Disclaimer

Điều này sẽ không có nghĩa là nhu cầu của dự án của bạn. Điều đó đã được trả lời bởi các ứng dụng khác.

---

Để tham khảo trong tương lai, tôi sẽ xem xét phương pháp tiếp cận oocss cho lớp bố cục. Bạn có thể có các trang có số lượng gạch khác nhau, v.v. Tôi sử dụng các trang sau cho các dự án của mình.

Đối tượng lát gạch

Được sử dụng để tạo bố cục lát gạch.

css

.tiles 
{ 
    display: block; 
} 

.tiles__item 
{ 
    display: block; 

    height: auto; 

    float:left; 
} 

.tiles--2 
{ 
    margin-left: -4%; 
} 

.tiles--3 
{ 
    margin-left: -2%; 
} 

.tiles--4 
{ 
    margin-left: -2%; 
} 

.tiles--2 .tiles__item 
{ 
    margin-left: 4%; 

    width: 46%; 
} 

.tiles--3 .tiles__item 
{ 
    margin-left: 2%; 

    width: 31.3%; 
} 

.tiles--4 .tiles__item 
{ 
    margin-left: 2%; 

    width: 23%; 
} 

html

<div class="tiles tiles--2"> 

    <div class="tiles__item"> 

    </div> 

    <div class="tiles__item"> 

    </div> 

</div> 

Dock Object

Docks nội dung vào cạnh của màn hình.

css

.dock 
{ 
    position: absolute; 

    height: auto; 

    width: auto; 
} 

.dock--t 
{ 
    width: 100%; 

    top: 0; 
} 

.dock--b 
{ 
    width: 100%; 

    bottom: 0; 
} 

.dock--l 
{ 
    height: 100%; 

    left: 0; 
} 

.dock--r 
{ 
    height: 100%; 

    right: 0; 
} 

html

<div class="dock dock--t"> 

    The content will be docked to the top of the screen. 

</div? 

Ones khác

tôi sẽ xem xét các đối tượng gạch trong UI Khung Metro. Họ cho phép chiều cao

http://metroui.org.ua/

Nếu bạn đang tìm kiếm một hệ thống bố trí tốt mà sử dụng tỷ lệ:

https://github.com/stubbornella/oocss/wiki/Grids