Html 复杂的CSS情况，页面居中，左右两侧有两个独立的背景_Html_Css_Layout

Html 复杂的CSS情况，页面居中，左右两侧有两个独立的背景

html css layout

Html 复杂的CSS情况，页面居中，左右两侧有两个独立的背景,html,css,layout,Html,Css,Layout,附加的图像是我们想要用html/css实现的。主要的一点是，页面以960px为中心，左边的列几乎占据了其中的1/3，右边的列几乎占据了2/3。两个部分由深灰色线分隔。这很简单问题是，在左边部分的左边，我们需要与左边部分相同的背景图案。右边也一样。所以在右边部分的右边，我们还需要浅灰色的背景图案。当然，我们不知道浏览器会打开多宽我正在寻找一个干净的独立于浏览器的解决方案，而不是一个在某些情况下有效，在某些情况下不起作用的黑客。此外，如果有任何帮助，我们正在使用LESSCS（casic CSS3

附加的图像是我们想要用html/css实现的。主要的一点是，页面以960px为中心，左边的列几乎占据了其中的1/3，右边的列几乎占据了2/3。两个部分由深灰色线分隔。这很简单

问题是，在左边部分的左边，我们需要与左边部分相同的背景图案。右边也一样。所以在右边部分的右边，我们还需要浅灰色的背景图案。当然，我们不知道浏览器会打开多宽

我正在寻找一个干净的独立于浏览器的解决方案，而不是一个在某些情况下有效，在某些情况下不起作用的黑客。此外，如果有任何帮助，我们正在使用LESSCS（casic CSS3解决方案也可以）

感谢您的意见

我已经使用CSS和JS（使用jquery，但可以使用纯JS）完成了这项工作。我将左/右设置为只使用不同的背景色-可以随意使用图像

CSS:

JS:

函数resizeDivs（）
{
var-WIDM=960；
var-WIDL=319；
var-WIDR=638；
var ww=$（window.width（）；
if（ww）您有哪些全宽元素？只是
，还是
？我最近回答了一个非常类似的问题（相同？）这里的问题：@thirtydot让我看看。看起来他们可能有一些共同点，或多或少。渐变版本与图像版本的功能相同，但没有图像。display:table cell被用作确保列高度相等的快速简便方法。
body {
    margin: 0px;
}

#full {
    min-width: 960px;
    position: relative;
}

#dleft {
    min-width: 319px;
    background-color: darkGray;
    border-right: solid 3px gray;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px
}

#dright {
    min-width: 638px;
    background-color: lightGray;
    height: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.left-content {
    float: right;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 299px;
    padding: 10px;
    margin-top: 10px;
}

.right-content {
    float: left;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 618px;
    padding: 10px;
    margin-top: 10px;
}

function resizeDivs()
{
    var WIDM = 960;
    var WIDL = 319;
    var WIDR = 638;

    var ww = $(window).width();

    if(ww <= WIDM)
    {
        $('#full').width(WIDM);
        $('#dleft').width(WIDL);
        $('#dright').width(WIDR);
    }
    else
    {
        var pad = (ww - WIDM) / 2;
        $('#full').width(ww);
        $('#dleft').width(WIDL + pad);
        $('#dright').width(WIDR + pad);
    }               
}

$(document).ready(resizeDivs);
$(window).resize(resizeDivs);

<body>
    <div id="full">
        <div id='dleft'>
            <div class="left-content">
                Left Column
            </div>
        </div>
        <div id='dright'>
            <div class="right-content">
                Right Column
            </div>
        </div>
    </div>
</body>