0

对不起我的英语。

拜托，我的 div 有问题，我有 3 个水平“带图像”的 div，图像必须在一起。

如果屏幕足够大，这是默认视图。 开始

如果导航器被调整大小，我会用#div2 失去中心。#div1 向左对齐，这不是我需要的。 问题

我需要的是#div2 保持在中心位置，但我不知道该怎么做。#div1 和 #div3 在导航器之外，没有一个 div 可以调整大小，都是固定大小。 我想要的是

html代码：

<body id="body">
    <div id="wrap">
        <div id="baseLeftBg">
        </div>
        <div id="baseContent">
        </div>
        <div id="baseRightBg">
        </div>
    </div>
</body>

CSS 代码：

#body {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #ffffff;
    -moz-background-size: cover;
    background-size: cover;
    float: inherit;
}

#wrap { 
    width: 1484px;
    margin: 0 auto;
    text-align:center;
}

#baseLeftBg {
    margin-top: 60px;
    background: #CDCDCD;
    width: 286px;
    height: 776px;
    float: left;
}

#baseContent {
    margin-top: 60px;
    background: #A7A7A7;
    width: 911px;
    height: 776px;
    float: left;
}

#baseRightBg {
    margin-top: 60px;
    background: #CDCDCD;
    width: 286px;
    height: 776px;
    float: left;
}

我怎么能这样做？

链接到小提琴：http: //jsfiddle.net/murb83/BChLs/

谢谢！！

4

6 回答 6

0

为包装器制作文本对齐中心会很有帮助。这将显示中心的元素。

#wrap { 
    width: 1484px;
    margin: 0 auto;
    text-align:center;
}
于 2012-07-10T11:23:57.953 回答
0

也许您应该尝试使其动态化，百分比如下：

#baseLeftBg {
    ..
    width: 20%;
    ..
}

#baseContent {
    ..
    width: 60%;
    ..
}

#baseRightBg {
    ..
    width: 20%;
    ..
}
于 2012-07-10T11:38:18.660 回答
0

其他解决方案可能是这样使用绝对定位：

#wrap {
..
position:relative;
..
}

#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
left:0;
}

#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
position:absolute;
top:0;
left:0;
right:0;
}

#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
right:0;
}
于 2012-07-10T11:43:33.540 回答
0

您为什么不考虑使用 Javascript 来解决您的问题？
您应该有一个尽可能大的容器，其中包含三个 div，并且使用 javascript，根据屏幕宽度，您应该设置左边距（显然它可能是一个负数）。

然后，使用 JS，您还可以处理屏幕调整大小的事件以“调整”左边距

于 2012-07-10T12:21:47.783 回答
0

我找到了一种使用 jsQuery 的方法。

HTML

<body id="body">
    <div id="wrap">
        <div id="baseLeftBg">
        </div>
        <div id="baseContent">
        </div>
        <div id="baseRightBg">
        </div>
    </div>
</body>​

CSS

#body {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #ffffff;
    -moz-background-size: cover;
    background-size: cover;
    float: inherit;
}

#wrap { 
    width: 500px;
    height: 300px;
}

#baseLeftBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}

#baseContent {
    background: #A7A7A7;
    width: 300px;
    height: 300px;
    float: left;
}

#baseRightBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}​

JS查询

$(window).resize(function(){
  $('#wrap').css({
    position:'absolute',
    left: ($(window).width() - $('#wrap').outerWidth())/2,
    top: ($(window).height() - $('#wrap').outerHeight())/2
  });
});

// To initially run the function:
$(window).resize();

var $scrollingDiv = $("#wrap");
     $(window).scroll(function(){            
        $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );            
     });

查看实际操作：http: //jsfiddle.net/murb83/BChLs/

于 2012-07-10T14:38:14.323 回答
0

那就是没有 JS 的解决方案目前对我来说还可以......

#wrap { 
    margin-top: 5%; 
    left: 50%;
    margin-left: -742px;
    position: absolute;
    width: 1484px;
    height: 776px;
}
于 2012-07-17T14:20:53.927 回答