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

-1

我的要求：如何设置所有嵌套DIV以匹配其父级大小。然后，根据其母公司DIV在流动环境中的销售情况和所在位置将所有嵌套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也应相应地保持其比例。

来源

2014-08-27 JonaNathali

我认为http://jsfiddle.net会帮助我们在这里，如果有可能的话 – Niklas 2014-08-27 12:14:15

做3内部div有相同的宽度（父div的1/3）？ – Giorgio 2014-08-27 12:15:12

@Giorgio：没有。他们是不同的大小。 – JonaNathali 2014-08-27 12:18:02

Got it！图片均垂直和水平居中

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代码，允许IM年龄被完全加载（否则图像宽度为0px，居中功能不起作用）。希望能帮助到你。

来源

2014-08-27 13:31:22 Giorgio

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

我建议让内部div从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/

来源

2014-08-27 12:24:58

谢谢。我的要求是将图像以100％的比例重叠在一起。 – JonaNathali 2014-08-27 12:45:57

缩放比例取决于图像大小还是其他元素的大小？ – 2014-08-27 12:47:35

图像的高度取决于窗口高度，同时保持纵横比。 – JonaNathali 2014-08-27 12:49:48

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

回答

相关问题