Bố cục CSS 3 cột với cột trung tâm cố định

Tôi muốn làm cho trang web tiếp thị của tôi có bố cục 3 cột có hình ảnh trong biểu ngữ trên cùng.Bố cục CSS 3 cột với cột trung tâm cố định

Tôi muốn có một bên trái/phải lỏng với một trung tâm cố định. Html lý tưởng sẽ trông giống như sau:

<div id="pixelLeft">&nbsp;</div> 
<div id="bannerCenter"> 
    <img src="images/mybanner.png" /> 
</div> 
<div id="pixelRight">&nbsp;</div> 

<style> 
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; } 
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; } 
#bannerCenter { /* something here to make fixed width of 1550px */ } 
</style>

Hình ảnh ở bên trái/phải pixel là 1px x 460px. Hình ảnh mybanner.png là 1550px x 460px.

Cảm ơn trước! (Đặc biệt nếu nó sẽ hoạt động trong TẤT CẢ các trình duyệt!)

Nguồn

2013-06-04 Adam Levitt

Điều này có hữu ích không?

CSS Only Demo

jQuery Demo(Cross Browser Compatible)

<div class="wrap"> 
    <div id="pixelLeft">&nbsp;</div> 
    <div id="bannerCenter"> 
     <img src="images/mybanner.png" /> 
    </div> 
    <div id="pixelRight">&nbsp;</div> 
</div> 
<div style="clear:both;"></div> 

*{ 
    margin:0; 
    padding:0; 
} 
#bannerCenter{ 
    background:#ddd; 
    width: 500px; 
    float:left; 
} 
#pixelLeft{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:left; 
} 
#pixelRight{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:right; 
} 

#bannerCenter,#pixelLeft,#pixelRight{ 
    height: 400px; 
}

Bạn có thể sử dụng jQuery thay vì sử dụng calc(50% - 250px); để làm cho nó tương thích với các trình duyệt cũ.

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2); 
    }).trigger('resize');  
});

Nguồn

2013-06-04 02:58:15

Điều này là tuyệt vời gần gũi, nhưng tôi đã thử nó trong IE7 và tất cả chuyển sang bên trái ... Đây là một giải pháp RẤT thanh lịch và những gì tôi đang tìm kiếm. Chúng ta có thể sửa được bit cuối cùng không? Cảm ơn bạn!! –

** + 1 ** Perfect :) –

Điều này có vẻ tốt lúc bắt đầu chắc chắn, nhưng khi tôi bắt đầu thay đổi kích thước cửa sổ mọi thứ có được một chút clunky. –

Có một số giải pháp cho điều này, có lẽ là bài phổ biến trong đó là phương pháp Holy Grail. Đó là một chút trên đầu của tôi, nhưng các liên kết này giải thích nó khá tốt.

http://alistapart.com/article/holygrail

http://matthewjamestaylor.com/blog/perfect-3-column.htm

tôi sẽ bắt đầu với bài viết A List Apart của. Chúc may mắn.

Sau khi đọc nó, tôi nghĩ rằng đây là những gì tôi sẽ làm gì:

HTML

<div id="header"> 
</div><div id="container"> 
    <div id="center" class="column"></div> 
    <div id="left" class="column"></div> 
    <div id="right" class="column"></div> 
</div><div id="footer"></div>

CSS

body { 
    min-width: 550px;  /* 2x LC width + RC width */ 
} 
#container { 
    padding-left: 200px; /* LC width */ 
    padding-right: 150px; /* RC width */ 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    width: 100%; 
} 
#left { 
    width: 200px;   /* LC width */ 
    right: 200px;   /* LC width */ 
    margin-left: -100%; 
} 
#right { 
    width: 150px;   /* RC width */ 
    margin-right: -150px; /* RC width */ 
} 
#footer { 
    clear: both; 
} 
/*** IE6 Fix ***/ 
* html #left { 
    left: 150px;   /* RC width */ 
}

Bạn sẽ cần phải điều chỉnh một số của các thứ nguyên, nhưng các bình luận nội tuyến sẽ giúp ích cho điều đó. Vì vậy, có bạn có nó. Bố cục Chén Thánh.

Nguồn

2013-06-04 02:50:51 micuik

Cảm ơn bài đăng, nhưng bài đầu tiên thực sự là ngược lại. Tôi đang tìm một trung tâm cố định và chất lỏng bên. –

Đây là giải pháp tốt, theo ý kiến của tôi là cách dễ nhất. Nó trông sạch sẽ và nó không cần div wrapper.

Demo

HTML

<body> 

<div id="left_container"> 
    <div id="left"> 
     left content 
    </div> 
</div> 

<div id="center"> 
    center content 
</div> 

<div id="right_container"> 
    <div id="right"> 
     right content 
    </div> 
</div> 

</body>

CSS

#left_container { 
    width:50%; 
    float:left; 
    margin-right:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 200px; 
} 
#left { 
    margin-right:480px; /* half of the center container width */ 

    /* not important */ 
    background: #888; 
    height: 600px; 
} 
#center { 
    width:960px; /* size of the fixed width */ 
    float:left; 

    /* not important */ 
    color: #FFF; 
    background: #333; 
    height: 500px; 
} 
#right_container { 
    width:50%; 
    float:right; 
    margin-left:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 300px; 
} 
#right { 
    margin-left:480px; /* half of the center container width */ 

    /* not important */ 
    height: 300px; 
    background-color: #888; 
}

tận hưởng!

Nguồn

2013-07-27 13:32:49 Armand

Giải pháp tuyệt vời, nó không yêu cầu bất kỳ đánh dấu JS hoặc CSS3 nào. –

Cảm ơn! Tôi cũng lưu ý rằng #left_container nên có lề trái: tự động, nếu không nó sẽ di chuyển sang bên trái. – liepumartins

Cảm ơn, điều này đã giúp tôi với menu di động của tôi, hoạt động tuyệt vời – Scott

<body> 
 
    <div style=" width: 200px; float: left; background: red; height: 100px;">Left</div> 
 
    
 
    <div style=" float: right; width: 200px; background: red; height: 100px;">Right</div> 
 
    <div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div> 
 
</body>

Đây là thủ thuật đơn giản thông qua html và css duy nhất để làm một cấu trúc lớp như vậy và nó sẽ giữ cho lớp trung lưu ở trung tâm ngay cả khi bạn sẽ thay đổi kích thước trình duyệt.

Nguồn

2015-02-18 08:29:15 Optimus

Bố cục CSS 3 cột với cột trung tâm cố định

Trả lời

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