按布局在页面上定位元素

Question

我有问题。我做了网站布局（下图的图片。几乎一切都很好，但有一个问题：这是一篇块文章： 当文字多时，按钮很好，但当文字少时，按钮向上移动...... 怎么做正常定位，并且不影响横线上的其他内容？
我的代码：HTML：

<article id = 'article'>
<section><!--first section-->
     <h1>This is header of theme1</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>
<section><!-- [n-1] section-->
     <h1>This is header of theme2</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>

CSS：

article
{
display:block;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
max-width:75% !important;
margin-left: 25px;
margin-top:0;
padding-left:5px;
padding-top:5px;
overflow:hidden;
}

article section
{
display:inline-block;
width:100%;
margin-bottom:50px;
}

article img
{
width:350px !important;
    height:350px !important;
}

article .leftText
{
float:left;
margin-right:5px;
margin-bottom:5px;
}

article section .button
{
background-color: red !important;
color: yellow !important;
}

布局： http://i.piccy.info/i9/ef5f5f405a91b18a55c34624ca90b0e7/1417550241/11708/837273/Bezymiannyi.png

这是个问题： http://i.piccy.info/i9/bf5a07a3bcc684a91e2ef81c224f55c7/1417550761/462126/837273/Bezymiannyi2.png

Answer 1

我认为这会解决您的问题：

hr {
    clear: both;
    float: none;
}