0

首先，请参考下图： 在此处输入图像描述

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

我想要的是：

  • 内容 div 成为“主要焦点”，例如当浏览器调整大小时，它应该保持在中间；
  • 调整浏览器大小时，我希望这两个图像基本上位于内容 div 下方。（不完全确定如何解释，但我希望你能理解）；
  • 浏览器的宽度可能（并且将会）超过 1400 像素（200 + 1000 + 200），在这种情况下，我希望左图尽可能地贴在左边，右图也一样尽可能的权利；
  • 我也不希望在调整浏览器大小时出现侧滚动条。（或者更确切地说，宽度小于 1400 像素）。

这些是我目前能想到的所有要求。

我一直在使用各种方法查找 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 没有居中，每当我调整它的大小时，它仍然专注于左侧的图像。

4

1 回答 1

2

这就是我的做法......我并不是说这是最好的解决方案。我觉得 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 中，我设置了一个基本的三列布局，当 div 变为全宽并阻塞时，pageWidth 为 .pageWidth-0-1 或 .pageWidth-1-2 时会覆盖。

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

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

于 2013-05-17T09:56:56.430 回答