Question

对不起我的英语。

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

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

如果导航器调整大小，我会丢失＃div2中心。＃div1与左边对齐，这不是我需要的。 Problem

我需要的是#div2留在中心，但我不知道这样做。 #div1和#div3在导航器之外，没有一个div可以调整大小，是固定大小。 What i want

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/

谢谢！

Answer 1

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

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

Answer 2

也许你应该试着让它变得动态，比如：

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

我找到了一种使用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;
}

JSQuery

$(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/

Answer 6

现在没有JS的解决方案对我来说还不错......

#wrap { 
    margin-top: 5%; 
    left: 50%;
    margin-left: -742px;
    position: absolute;
    width: 1484px;
    height: 776px;
}

如何...中心的三个中间div，如果导航器调整大小

6 个答案: