CSS 3柱液体布局，带固定中心柱

本文介绍了CSS 3柱液体布局，带固定中心柱的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想为我的营销网站制作一个在顶部横幅中包含图片的3列布局。

I want to make for my marketing site a 3 column layout that has images in the top banner.

我想有一个固定中心的液体左/右侧。 html最好看起来像这样：

I want to have a liquid left/right side with a fixed center. The html would ideally look like this:

<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>

左/右像素边的图像为1px x 460px。 图片mybanner.png是1550像素×460像素。

The images in the left/right pixel sides are 1px x 460px. The image mybanner.png is 1550px x 460px.

提前感谢！

推荐答案

这对您有帮助吗？

仅CSS演示

jQuery演示（兼容跨浏览器）

<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; }

您可以使用jQuery而不是使用 calc

You can use jQuery instead of using calc(50% - 250px); to make it compatible for older browsers.

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