佈局頁面上的定位元素

我遇到了問題。我做了網站佈局（圖片在下面的圖片幾乎一切都很好，但有一個問題：這是一個塊文章：當很多文本，按鈕是好的，但是當文本很少，然後按鈕向上移動.. 。怎麼辦正常的定位，並且它不會影響在水平線上的其他內容
我的代碼：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

來源

2014-12-02 badCoder

從幫助用戶，左邊的圖像http://i.piccy.info/i9/下連接按鈕58e7233d07d1c67999cd27637b3074aa/1417551389/327468/837273/Bezymiannyi66.png – badCoder 2014-12-02 20:17:15

我認爲這將解決您的問題：

hr { 
    clear: both; 
    float: none; 
}

來源

2014-12-02 20:18:26 vinopatxoko

這也可以，你知道，如何在圖像下移動按鈕？） – badCoder 2014-12-02 20:26:25

佈局頁面上的定位元素

回答

相關問題