按钮显示在另一个元素上

Question

我正在尝试按照图片http://i.stack.imgur.com/qF3dQ.png

进行设计

但编码后我得到一些小错误

• 按钮移动到div之外
• 保证金不起作用

继续使用该设计有外部库但我不想要任何外部脚本

如何使用CSS实现设计？有人可以帮助我解决我遇到的小错误吗？

CODE

.div{
    float:left;
    width:22%;
    margin-top:15px;
    margin-left:15px;
    border: solid 0 #FFF;
    -moz-box-shadow: 1px 1px 5px #CCC;
    -webkit-box-shadow: 1px 1px 5px #CCC;
    box-shadow: 1px 1px 5px #CCC;
    position: relative;
}
.div img{
    width:100%;
    height:180px;
}
.div h1{
    font: 500 1.5em Roboto,Arial,Helvetica !important;
}
.div div{
    position: absolute;
    bottom:0;
    width:100%
}
.div div a{
    width:45%;
    float:right;
    margin: 10px;
    position: absolute
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="div">
    <img src="thumb/ufdRX.png"/>
    <h5>WINDOWS</h5>
    <h1>Boot From a CD or USB Drive on Any PC</h1><hr>
    <div>
        <a href="#" class="btn btn-xs btn-success">Read more</a><br>
    </div>     
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>Top Ten Android Application</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>How to take Snapshot in android Ice Cream Sandwich 4.0.x</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>10 Programming Languages You Should Learn Right Now</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>12 Effective Home Remedies To Treat Skin Cancer</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>Social networking sites</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>top hotels around world to visit</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>best places you must visit in india</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>worst places you should never visit</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>
<div class="div">
    <img src="dual.png"/>
    <h1>top ten best mobiles</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
 </div>

Answer 1

将这些代码替换为css中的代码（删除绝对定位）：

.div div{
    bottom:0;
    width:100%
}
.div div a{
    width:45%;
    float:right;
    margin: 10px;
}

Answer 2

您的布局正在破坏，因为您没有清除浮动元素。 This是关于花车的好文章。但是，您不需要浮动按钮，您可以应用以下CSS来修复布局问题

.div div {
    /* Remove old styles */
    text-align: right;
}

.div div a {
    /* Remove old styles */
    margin: 0 10px 10px 0;
}

Answer 3

试试这个JSFiddle 真正打破你设计的是绝对定位 我还在container-div中添加了一个min-width，因为否则它在某个点上看起来非常令人毛骨悚然。

＆＃13;

＆＃13;

.div{
    position: relative;
    float:left;
    width:22%;
    min-width:200px;
    margin-top:15px;
    margin-left:15px;
    border: solid 0 #FFF;
    -moz-box-shadow: 1px 1px 5px #CCC;
    -webkit-box-shadow: 1px 1px 5px #CCC;
    box-shadow: 1px 1px 5px #CCC;
    
}
.div img{
    width:100%;
    height:180px;
}
.div h1{
    display:block;
    margin: 5px;
    font: 300 1.2em Roboto,Arial,Helvetica !important;
}
.div div{
    width:100%;
    height:40px;
    padding:9px;
    box-sizing:border-box;
    text-align:right;
    border-top:solid 1px #ddd;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="div">
    <img src="dual.png"/>
    <h1>How to take Snapshot in android Ice Cream Sandwich 4.0.x</h1>
    <div><a href="#" class="btn btn-xs btn-success">Read more</a></div>
</div>

＆＃13;

＆＃13;

＆＃13;