Question

我试图将div放在另一个div的底部，但无法做到

        <div class="div">
            <img src="dual.png"/>
            <h1>Boot From a CD or USB Drive on Any PC</h1>
            <div>footers</div>
        </div>

CSS

.div{
        float:left;
        height:300px;
        width:22%;
        margin-top:15px;
        margin-left:15px;
        background-color: #e4f2ff
    }
    .div img{
        width:100%;
        height:180px;
    }
    .div h1{
        font-size:20px
    }
    .div div{
        background:red;
        float: bottom;
        position: absolute;
        bottom: 0;
    }

这是

jsfiddle

试图像这样设计http://i.stack.imgur.com/CdGKY.png 有人可以帮助我如何在父div的底部定位div .. 提前谢谢

Answer 1

删除位置：绝对解决您的问题。

注意：还要尝试让您的班级名称更清晰。

Answer 2

这也取决于您希望它如何流动。但是既然你已经绝对存在，那我就去了。

将position: relative;添加到父级。

将你的float: bottom;（没有这样的东西）从页脚div中移开。

＆＃13;

.div {
  float: left;
  height: 300px;
  width: 22%;
  margin-top: 15px;
  margin-left: 15px;
  background-color: #e4f2ff;
  position: relative;
}
.div img {
  width: 100%;
  height: 180px;
}
.div h1 {
  font-size: 20px
}
.div div {
  background: red;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="div">
  <img src="dual.png" />
  <h1>Boot From a CD or USB Drive on Any PC</h1>

  <div>footers</div>
</div>

＆＃13;

Answer 3

删除

position: absolute;
bottom: 0;
float: bottom;

来自Css选择器

.div div{

所以它会像：

.div div{
    background:red;

}

Answer 4

你的代码中有几个失败。作为建议从不为div班级div命名，而且没有float: bottom。

您需要向父元素添加position: relative以在子元素中使用position: absolute。

.top{
    float:left;
    height:300px;
    width:22%;
    margin-top:15px;
    margin-left:15px;
    background-color: #e4f2ff;
    position: relative;
    display: block;
}
.div img{
    width:100%;
    height:180px;
}
.div h1{
    font-size:20px
}
.footer {
    background:red;
    position: absolute;
    bottom: 0;
    left: 0;
}

<div class="top">
    <img src="dual.png"/>
    <h1>Boot From a CD or USB Drive on Any PC</h1>
    <div class="footer">footers</div>
</div>

Answer 5

显示：表格可以帮助您：http://jsfiddle.net/j1raqvc8/4/

＆＃13;

.div {
    float:left;
    height:300px;
    width:22%;
    margin-top:15px;
    margin-left:15px;
    background-color: #e4f2ff;
    display:table;
}
.div img {
    width:100%;
    height:180px;
}
.div h1 {
    font-size:20px;
    margin:0
}
.div div {
    background:red;
    display:table-footer-group;
}

＆＃13;

<div class="div">
    <img src="dual.png" />
     <h1>Boot From a CD or USB Drive on Any PC</h1>
    <div>footers</div>
</div>

＆＃13;

但如果内容需要更多高度http://jsfiddle.net/j1raqvc8/5/，它将允许盒子长度超过300px。

无法将div放在另一个div的底部

jsfiddle

5 个答案: