Question

我正在创建一个水平滑块，但我有点混淆这些div的位置。它显示了firefox和amp;之间的不同Chrome浏览器。

            /* This should be aligned to top */
            .img {
                border: 1px solid blue;
                height: 85%;
            }

            /* This should be aligned to bottom */
            .views {
                height: 15%;
                border: 1px solid green;
            }



            <table>
            <tr>
                <td><div class="img">any image</div><div class="views">3500 views</div></td>                
                <td><div class="img">any image</div><div class="views">2990 views</div></td>                
                <td><div class="img">any image</div><div class="views">1678 views</div></td>                
                <td><div class="img">any image</div><div class="views">1234 views</div></td>                
                <td><div class="img">any image</div><div class="views">890 views</div></td>             
                <td><div class="img">any image</div><div class="views">789 views</div></td>             
            </tr>
            </table>

Answer 1

你需要将container（）的css属性设置为position：relative然后你需要设置

td {position:relative;}  <-- this will need some tweaking by class or id
.img { position:absolute; top:0px;  border: 1px solid blue;height: 85%;}
.views {position:absolute; bottom:0px;height: 15%;border: 1px solid green;}

你也可以考虑在TD中为位置添加一个div容器：relative;部分

如何将这些div设置为bottom＆amp;容器顶部？

1 个答案: