垂直对齐与自动高度div相关的div [英] Vertical-align div in relation to auto height div

问题描述

我正在尝试使垂直对齐的div与汽车高度div有关。

这有点难以解释，所以我有截图来解释一切：

橙色 div是容器。

蓝色 div是第二个容器 绿色 div是垂直对齐 div，应与蓝色对齐。

我不知道如何完成这项工作。我希望它能够跨浏览器（ie6 +，ff& chrome）。

非常感谢！

解决方案

请参阅： http：// jsfiddle。 net / thirtydot / aeFrH /

CSS：

  #container {
 width：748px; 
 background：orange; 
} 
＃container-inside {
 width：500px; 
背景：青色; 
} 
 #aligned {
 width：248px; 
背景：绿色; 
} 
＃container-inside，#aligned {
 display：inline-block; 
 * display：inline; 
 zoom：1; 
 vertical-align：middle; 
 
  

HTML：

 < div id =container> 
< div id =container-inside> 
一些< br /> 
内容< br /> 
是< br /> 
 in< br /> 
 here。< br /> 
< / div>< div id =aligned> 
对齐。 
< / div> 
< / div> 
  

I am trying to make vertical-aligned div in relation to auto height div.
It is a little bit hard to explain so I have screenshot that will explain everything:

The orange div is the container.
The blue div is 2nd container inside the main container.
The green div is the vertical-aligned div which should be aligned in relation to the blue one.

I have no idea how to make this work. I want it to be cross browser (ie6+, ff & chrome).

Thank you very much!

解决方案

See: http://jsfiddle.net/thirtydot/aeFrH/

CSS:

#container {
    width: 748px;
    background: orange;
}
#container-inside {
    width: 500px;
    background: cyan;
}
#aligned {
    width: 248px;
    background: green;
}
#container-inside, #aligned {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

HTML:

<div id="container">
    <div id="container-inside">
        Some<br />
        content<br />
        is<br />
        in<br />
        here.<br />
    </div><div id="aligned">
        Aligned.
    </div>
</div>

这篇关于垂直对齐与自动高度div相关的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！