Question

首先，请参阅下图： enter image description here

这基本上是我对布局的想法。

我想要的是：

内容div是“主要焦点”，例如浏览器时调整大小，它应该保持在中间;
当调整浏览器大小时，我基本上想要这两个图像落在内容div下面。（不完全确定如何解释这个，但我希望你理解）;
可能（并且将会）发生浏览器宽度超过 1400px（200 + 1000 + 200），在这种情况下，我想要左图像尽可能地向左侧移动，对于正确的图像也是如此坚持尽可能向右;
我也不希望在浏览器出现时出现sidecrollbar 调整大小。（或者说，宽度小于1400px）。

这些是我目前可以从头脑中想到的所有要求。

我一直在寻找css的东西，并使用各种方法在css中旋转了几个小时，但从未得到我想要的效果。我不是不太可能几次非常接近解决方案，而只是错过了一个单独的css元素或其他什么。尝试使用z-index，float和其他一些东西。

有人可以帮助我吗？

提前致谢。

代码示例：

CSS：

#backgroundimages {
    overflow:hidden;
    height: 1000px;
}

#imageleft{
    float:left;
    background: url(homebg.png);
    height: 1000px;
    width: 445px;
}


#imageright{
    background: url(homebg2.png);
    float:right;
    height: 1000px;
    width: 445px;
}


#middlecontent {
    float:left;
    overflow:visible;
    height: 1000px;
    width: 1000px;
    margin-left: auto;
    background-color: red;
}

HTML：

<div id="backgroundimages">
    <div id="imageleft"></div>
    <div id="middlecontent"></div>
    <div id="imageright"></div>
</div>

例如，这看起来非常接近我想要完成的内容，但首先内容div没有居中，每当我调整大小时，它仍然专注于左边的图像。

Answer 1

以下是我将如何做到的......我不是说这是最好的解决方案。我觉得CSS媒体查询还不够支持，所以我把这个小小的jQuery放在一起帮助我...... http://jsfiddle.net/ZdR8P/

顺便说一下，我不是那里最好的jQuery程序员，所以可能有更好的方法来实现相同的结果（来自更好的jQuery程序员的反馈总是受欢迎！）

这是HTML

<body>
    <div id="one">Content in here</div>
    <div id="two">Content in here</div>
    <div id="three">Content in here</div>
</body>

jQuery

$(document).ready(function(){

var reportWidth = true;

if (reportWidth){
    $('body').append('<div id="reportWidth">'); 
    $('#reportWidth').css({
        position:'fixed',
        bottom:0,
        left:0,
        right:0,
        backgroundColor:'#666666',
        color:'#ffffff'
    })
}

    var breakpoint=new Array();
    breakpoint.push(320); // iPhone 4 & 5 in portrait
    breakpoint.push(480); // iPhone 4 in landscape
    breakpoint.push(568); // iPhone 5 in landscape
    breakpoint.push(768); // iPad in portrait
    detectViewportWidth(breakpoint,reportWidth);
    $(window).resize(function(){
    detectViewportWidth(breakpoint,reportWidth)
    });
});

function detectViewportWidth(breakpoint,reportWidth){
    var htmlClassPrefix='pageWidth-';
    var currentWidth=$(window).width();
    var noBreakpoints=breakpoint.length;
    var widthClass=noBreakpoints+'-'+(noBreakpoints+1);
    $('html').removeClass(htmlClassPrefix+widthClass);
    var previousArrayVal=0;
    $.each(breakpoint,function(arrayKey,arrayVal){
        $('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1));
        if (currentWidth<=arrayVal && currentWidth>previousArrayVal){
            widthClass=arrayKey+'-'+(arrayKey+1);
        }
        previousArrayVal=arrayVal;
    });
    $('html').addClass(htmlClassPrefix+widthClass);
    if (reportWidth){
        $('#reportWidth').text(htmlClassPrefix+widthClass); 
    }
}

和CSS：

div {
    border:1px solid #999999;
    display:inline-block;
    width: 29%;
    margin: 0 1%;
}
.pageWidth-0-1 div,
.pageWidth-1-2 div
{
    display:block;
    width:98%;
}

它的作用基本上是检测视口的宽度，并将类应用于.pageWidth-2-3行的body标签。如果更改窗格的大小，您将看到底部的小状态栏相应地更改。 .pageWidth-0-1是最窄的.pageWidt-4-5是最宽的（但是对于你可以在jQuery中设置多少个分区或“断点”没有理论限制。）

然后，在你的CSS中你设置了一个默认布局 - 你可能希望默认布局是正常的三列布局，正如我在小提琴中所示 - 这假设大部分访问者将在正常情况下查看监控......例如。

然后，您可以定义视口变小时的特定样式行为。希望你能在我的CSS中看到我设置了一个基本的三列布局，当页面宽度为整数时，页面宽度为.pageWidth-0-1或.pageWidth-1-2。

尝试更改小提琴中窗格的宽度，当它变得足够窄时，你应该看到div落入垂直列。

希望这可以给你一个起点？

CSS div放置

1 个答案: