Question

我的要求：如何设置所有嵌套的DIV以匹配其父级大小。然后根据其父DIV在流动环境中的销售和位置来居中所有嵌套DIV？

<style type="text/css">
    #mainContainer {
    background-color: #fff;
    width: 450px;
    height: 400px;margin: auto;

}
.cont1{
    position:absolute;
    z-index:1;
    margin: auto;
}
.cont1inner{
    height: 100%;
}
.cont2 {
    position:absolute;
    z-index:2;
    margin: auto;
}
.cont3{
    position:absolute;
    z-index:3;
    margin: auto;
}
</style>

  <body>
  <div id="wCont">
  <div class="container-fluid">
    <div class="row">
      <div id="mainContainer">
          <div class="cont1">
            <img class="cont1inner" src="http://img42.com/PWehV+">
          </div>
          <div class="cont2">
            <img id="somethingA" src="http://img42.com/PWehV+">
          </div>
          <div class="cont3">
            <img id="somethingB" src="http://img42.com/PWehV+">
          </div>
      </div></div>
    </div>
  </div>
  </body>

示例：mainContainer设置为高度：75％;它里面有3个DIV。调整窗口大小时mainContainer应保持高度：75％，其中3个DIV也应相应保持其比例。

Answer 1

知道了！图像垂直和水平居中

<强> HTML

<div class="container">
    <img class="content" id="one" src="http://img42.com/PWehV+" />
    <img class="content" id="two" src="http://img42.com/PWehV+" />
    <img class="content" id="three" src="http://img42.com/PWehV+" />
</div>

<强> CSS

body,html {
    height:100%;
}

.container {
    height:75%;
    border:1px solid green;
    position:relative;
}

.content {
    border:1px solid red;
    position:absolute;
}

#one {
    z-index:1;
    height:80%;
    top:10%;
}

#two {
    z-index:2;
    height:50%;
    top:25%;
}

#three {
    z-index:3;
    height:20%;
    top:40%;
}

<强> jsFiddle code

您必须在窗口加载时执行jquery代码以允许图像完全加载（否则图像宽度为0px并且居中功能不起作用）。希望它有所帮助。

Answer 2

在CSS中使用百分比要求父div具有指定的大小，可以是px，也可以是百分比本身。您可以尝试指定链中的所有div的高度和宽度，但这可能会变得混乱。

我建议让内部div从mainContainer继承它们的大小，mainContainer使用Javascript根据窗口大小获取它的大小。我已经制作了一个类似于您的示例的基本JSFiddle example here，代码有点整理。

在那个小提琴中，contentWrapper（mainContainer）的高度和宽度设置为窗口的高度和宽度，但你可以通过一些数学或修改的JS轻松改变它。

HTML：

<div id='contentWrapper' class="container">
    <div class='contentContainer'>
        <img id="contImg1" class="contentimage" src="http://img42.com/PWehV+"/> 
    </div>
    <div class='contentContainer'>
        <img id="contImg2" class="contentimage" src="http://img42.com/PWehV+"/> 
    </div>
    <div class='contentContainer'>
        <img id="contImg3" class="contentimage" src="http://img42.com/PWehV+"/> 
    </div>
</div>

CSS：

.container{
    border: 1px solid black;
}
.contentContainer{
    border: 1px solid red;
    height: 33%;
    overflow: hidden;
}

JS：

$(function(){
    $('#contentWrapper').height($(window).height());
    $('#contentWrapper').width($(window).width());
});

我还在那里放了一些边框颜色，这样你就可以看到发生了什么。这有帮助吗？

修改

带有不同图像的新JSFiddle，其大小随容器大小而变化。在此阶段，容器会根据窗口大小调整大小，但这很容易更改。 http://jsfiddle.net/np2bxeye/3/

嵌套DIV的中心元素基于其父DIV在流体环境中

2 个答案: