Question

一旦它的多个元素变得简单

position:absolute;
bottom:0;

无效，因为它会覆盖多个元素

这是我尝试的一个小提琴：http://jsfiddle.net/7uYUP/ （这是我想要向右和向下浮动的.interaction元素，现在它们只是向右浮动）

我希望不必诉诸JS ..

Answer 1

问题是绿色和黄色方框之间的高度不同（10pt对40pt）。您可以使用margin-top：

进行调整

.interaction{
   height:40pt;
   width:100pt;
   background-color:yellow;
   float:right;
   border: 1pt solid blue;
   margin-top:-32pt;
}

http://jsfiddle.net/7uYUP/2/

Answer 2

<body>

<div id="container"><div>

    <div class="interaction leftalign">
    </div>

    <div class="interaction">
    </div>  

</div></div>  

</body>  



 body{
      background-color:red;
    }

    #container{
     position:absolute;
      height:10pt;
      width:100%;
      background-color:green;
     bottom:0;
    } 

    #container > div {
      position:relative;
      height:100%;
    }  

    .interaction{
    height:40pt;
    width:100pt;
    background-color:yellow;
    float:right;
    border: 1pt solid blue;
    }  

    .interaction.leftalign {
      float:left;
    }

向右和向下浮动多个元素

2 个答案: