具有居中页面的棘手CSS情况和左右两个单独的背景

时间：2022-03-25 13:28:36

The attached image is what we want to achieve with html / css. The main points are that the page is 960px centered, the left column takes almost 1/3 of that and the right takes almost 2/3. Both sections are separated by the dark gray line. That's simple to do.

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

The problem is that on the left of the left section, we want the same background pattern as the one in the left section. And same for the right side. So on the right of the right section, we also want the light gray background pattern. Of course we don't know ahead of time how wide the browser will be open.

问题是在左侧部分的左侧，我们想要与左侧部分中的背景图案相同的背景图案。对于右侧也一样。因此，在右侧部分的右侧，我们还需要浅灰色背景图案。当然，我们不知道浏览器的打开范围有多宽。

I'm looking for a clean browser independent solution - not a hack that works in some cases and in some cases doesn't. Also, if it's any help we're using LessCSS (casic CSS3 solutions work too).

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

Appreciate your input!

感谢您的意见！

具有居中页面的棘手CSS情况和左右两个单独的背景

1 个解决方案

#1

1  

I've managed to get this done using CSS and JS (using jquery, but you could do similar stuff using pure JS). I set the left/right to simply use different background colours - feel free to use images.

我已经设法使用CSS和JS完成了这个（使用jquery，但你可以使用纯JS做类似的东西）。我将左/右设置为仅使用不同的背景颜色 - 随意使用图像。

CSS:

CSS：

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

JS:

JS：

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

And, finally, HTML:

最后，HTML：

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

#1

1  

I've managed to get this done using CSS and JS (using jquery, but you could do similar stuff using pure JS). I set the left/right to simply use different background colours - feel free to use images.

我已经设法使用CSS和JS完成了这个（使用jquery，但你可以使用纯JS做类似的东西）。我将左/右设置为仅使用不同的背景颜色 - 随意使用图像。

CSS:

CSS：

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

JS:

JS：

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

And, finally, HTML:

最后，HTML：

<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>
标签：

相关文章