Css 如何。。中间三个div始终居中，如果调整导航器的大小_Css_Html

Css 如何。。中间三个div始终居中，如果调整导航器的大小

css html

Css 如何。。中间三个div始终居中，如果调整导航器的大小,css,html,Css,Html,对不起，我的英语不好请，我有一个与div的问题，我有3个div“与图像”水平，图像必须在一起如果屏幕足够大，这里是默认视图。如果调整导航器的大小，我将使用#div2失去中心。div1向左对齐，这不是我需要的。我需要的是第二组留在中心，但我不知道该怎么做#div1和#div3在导航器之外，没有一个div可以调整大小，是固定大小的。 html代码： <body id="body"> <div id="wrap"> <div id="

对不起，我的英语不好

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

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

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

我需要的是第二组留在中心，但我不知道该怎么做#div1和#div3在导航器之外，没有一个div可以调整大小，是固定大小的。

html代码：

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

我怎么能做到

链接到小提琴：

谢谢

使包装器的文本居中对齐将很有帮助。这将显示中间的元素

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

也许你应该尝试让它充满活力，比如：

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

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

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

其他解决方案可以使用如下绝对定位：

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

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

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

我找到了一种使用jsQuery实现这一点的方法

HTML

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

请参阅实际操作：

这是没有JS的解决方案，目前对我来说还可以

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

我想你会希望中间部分固定，左右部分灵活？三个部分必须在一起，但如果我调整屏幕大小，中间部分必须永远在中间，其他部分可以先离开navigatoris，就像所有部分的锚点都在#div2的中心一样。我希望我解释得很好。我在问题的底部添加了jsFiddle链接来运行代码。谢谢！但问题依然存在，div1并没有从导航器中消失。像上面的第二张图片一样进行操作：（谢谢，但不起作用，div必须在一起，但是#div2必须保持在中间。我做了一些代码：嗨，谢谢！我不知道如何使用Javascript，但我会尝试找到信息来学习如何做。#wrap{width:1484px；margin:0 auto；text align:center；}我发现了一个问题。如果我使用比网站小的浏览器，我无法向任何方向正确滚动，脚本不断地将网站居中。我也看不到网站的左侧部分。

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

$(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' );            
     });

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