CSS 3 Cột nổi (2 cố định, 1 động)

Tôi đang thiết kế tiêu đề được tạo thành từ 3 phần. kích thước min-width:940px; max-width:1200px;CSS 3 Cột nổi (2 cố định, 1 động)

Hai phần đầu của tiêu đề sẽ được cố định::

Trang phải chất lỏng

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

Tôi muốn phần bên phải để thay đổi tùy thuộc vào kích thước của trang , Tôi sẽ dán những gì tôi có cho đến nay nhưng vấn đề của tôi là làm cho nó lấp đầy khoảng trống hoàn toàn.

HTML:

<div class="main"> 

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>

CSS:

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

Nguồn

2009-07-18 Anonymous

Điền vào khoảng trống cho tiêu đề hoặc phần còn lại của trang? – random

Hãy thử điều này:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

Nguồn

2009-07-18 10:45:39 cletus

tại chỗ, cảm ơn rất nhiều! –

Codepen: http://codepen.io/clouddueling/pen/wyIcC –

tôi không có đủ uy tín để bình luận, nhưng tôi chỉ muốn để xác nhận tính chính xác của câu trả lời trước. Tôi đang tìm kiếm một cái gì đó hơi khác nhau: cố định lỏng cố định, vì vậy tinh chỉnh nó như sau:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

Những điểm chính cần chú ý: - lề, với phao, được sử dụng để ngăn chặn cơ thể chồng chéo với các cạnh. - trong trường hợp của tôi, bạn cần phải đảo ngược thứ tự của các div trong html - bạn thực sự không cần một div cho "trung". Một trang web mà không có là blog quirksmode (nó chỉ đặt lề trực tiếp trên phần tử "body"): http://www.quirksmode.org/blog/archives/browsers/index.html

Nguồn

2010-10-19 05:29:32

CSS 3 Cột nổi (2 cố định, 1 động)

Trả lời

Các vấn đề liên quan