2

一旦它是多个元素，一个简单的

position:absolute;
bottom:0;

无济于事，因为它会覆盖多个元素

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

我希望不必求助于JS ..

4

2 回答 2

2

问题是绿色和黄色框之间的高度不同（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/

于 2013-01-18T01:17:38.927 回答
0 
<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;
    }
于 2013-01-18T03:54:02.007 回答