Question

所以当我今天上班时，我有一个问题需要解决。我在另一个div中有3个div，我希望3个内部div与第一个在最顶部相同，第三个在最底部。这些div具有固定的高度，即使我改变外部div的高度，我希望它们保持相等的间距。

我已经重新创建了该方案的问题，以便您可以向我展示我需要添加的内容。我知道我可能需要做一些涉及auto的事情。如果你给出一个很好的解释，那么我可能会选择你作为最佳答案。

CSS：

div.outer
{
    height: 400px;
    width: 100px;
    background-color: blue;
}

div.inner
{
    width: 100%;
    height: 100px;
    background-color: red;
}

HTML：

<div class="outer">
   <div class="inner">
       <p>This should be pushed against the top of the blue div</p>      
   </div>
   <div class="inner">
       <p>This should be smack-dab between the other two </p>      
   </div>
   <div class="inner">
       <p>This should be pushed against the bottom of the blue div</p>      
   </div>    
</div>

Answer 1

您可以在容器中使用display: table，在display: table-row课程中使用inner。另外，我在每行之间添加div作为分隔符。

div.outer
{
    width: 100px;
    background-color: blue;
    display: table;
    height: 400px;
}

div.inner
{
    width: 100%;
    height: 100px;
    background-color: red;
    display: table-row;
}

<div class="outer">
   <div class="inner">
       <p>This should be pushed against the top of the blue div</p>       
   </div>
    <div class="seperator"></div>
   <div class="inner">
       <p>This should be smack-dab between the other two </p>      
   </div>
    <div class="seperator"></div>
   <div class="inner">
       <p>This should be pushed against the bottom of the blue div</p>      
   </div>
    <div class="seperator"></div>    
</div>

如您所见，您可以添加或删除分隔符：

div.outer
{
    width: 100px;
    background-color: blue;
    display: table;
    height: 400px;
}

div.inner
{
    width: 100%;
    height: 100px;
    background-color: red;
    display: table-row;
}

<div class="outer">
   <div class="inner">
       <p>This should be pushed against the top of the blue div</p>       
   </div>
    <div class="seperator"></div>
   <div class="inner">
       <p>This should be smack-dab between the other two </p>      
   </div>
    <div class="seperator"></div>
   <div class="inner">
       <p>This should be pushed against the bottom of the blue div</p>      
   </div>  
   <!--<div class="seperator"></div>-->
</div>

最后：

div.outer {
    width: 100px;
    background-color: blue;
    display: table;
    height: 400px;
}
div.inner {
    width: 100%;
    height: 100px;
    background-color: red;
    display: table-row;
}

<div class="outer">
    <div class="seperator"></div>
    <div class="inner">
        <p>This should be pushed against the top of the blue div</p>
    </div>
    <div class="seperator"></div>
    <div class="inner">
        <p>This should be smack-dab between the other two</p>
    </div>
    <div class="seperator"></div>
    <div class="inner">
        <p>This should be pushed against the bottom of the blue div</p>
    </div>
    <div class="seperator"></div></div>

Answer 2

我认为这就是你想要的：http://jsfiddle.net/vp3uzvrz/4/

基本上我使用这个值绝对位置：

.inner1, .inner2, .inner3
{
    width: 100%;
    height: 100px;
    background-color: red;
    position:absolute;
}
.inner1 {top:0}
.inner2 {
    top:50%;
    margin-top:-50px; /*half div height negative margin*/
}
.inner3 {bottom:0}

不要忘记添加位置：相对于容器

Answer 3

尝试使用蛇形命名你的3个div，然后使用和y定位将它们放在你想要的位置，或者将蓝色div的垂直长度向上移动，将其拧紧到底部div的边缘。

Answer 4

Flexbox也会帮助你。

div.outer
{
    display: flex;
}

http://jsfiddle.net/r4m809ax/1/

这只是整体版本;小提琴有一大堆特定于浏览器的变化。并确保检查您的浏览器要求：http://caniuse.com/flexbox

Answer 5

div.outer
{
    height: 500px;
    width: 100px;
    background-color: blue;
    position:relative;
    resize:vertical;
}

div.inner
{
    height: 30%;
    background-color: red;
    position:absolute;
}

div.inner:first-child{
    top:0;
}

/*middle child*/
div.inner:nth-child(2){
    top:0;
    bottom:0;
    margin:auto;
}
div.inner:last-child{
    bottom:0;
}

http://jsfiddle.net/vp3uzvrz/8/

Answer 6

CSS

div.outer
{
    height: 400px;
    width: 100px;
    background-color: blue;
    display:table;
}

div.inner
{
    width: 100%;
    height: 100px;
    background-color: red;
    display:table-row;
}

p {
    display:table-cell;
    margin:0;
    padding:0;
    vertical-align:middle;
}

HTML

<div class="outer">
   <div class="inner">
       <p>This should be pushed against the top of the blue div</p>      
   </div>
   <div class="inner">
       <p>This should be smack-dab between the other two </p>      
   </div>
   <div class="inner">
       <p>This should be pushed against the bottom of the blue div</p>      
   </div>    
</div>

样本

http://jsfiddle.net/ibbatta/vp3uzvrz/9/

使3个div在另一个div内等间隔

6 个答案: